iview 的table表格组件使单元格可编辑和输入

表格的列定义中,在需要编辑的字段下使用render函数

template表格组件

html 复制代码
<Table border :data="data" :columns="tableColumns" :loading="loading"></Table>

data中定义table对象

javascript 复制代码
  table: {
        tableColumns: [
          {
            title: '商品序号',
            key: 'gno',
            minWidth: 100,
            align: 'center',
            render: (h, params) => {
              //使用抽离出的getRender函数,来执行后续的render行为
                return h('Input', this.getRender(h, params, 'gno','input')); 
            }
          },
          {
            title: '操作类型',
            key: 'opType',
            minWidth: 120,
            align: 'center',
            render: (h, params) => {
                return h('Select', this.getRender(h, params, 'opType','select'),
                this.porttList.map(function (type){  //下拉框的选项
		           return h('Option',{
		               props:{
		                   value: type.value,
		                   key: type.label,
		               }
		           },type.label);
		        }));
            }
          },
       ]
    }

抽离出一个render的函数

javascript 复制代码
getRender(h, params, key,types){
    return{
        props: {
          value: params.row[key]
        },
        class:"input-table",  // 定义一个类来控制单元格的样式
        style:{
          width:'100%!important'
        },
        on:{
           'on-change':(event) => {
               //获取编辑行的index和编辑字段名,对表格数据进行重新赋值,注意:与下拉框取值不一样
               if(types == 'input'){
                  this.detailData.vos[params.index][params.column.key]= event.currentTarget.value; 
               }else if(types == 'select'){
                  //下拉框选择获取编辑行的index和编辑字段名,对表格数据进行重新赋值
                  this.detailData.vos[params.index][params.column.key] = event
               }
                            
            }
        }
   }
}

选择器option

javascript 复制代码
   porttList:[
        {
            value: '1',
            label:'深圳',
        },{
            value: '2',
            label:'杭州',
        }
    ],

效果图:

相关推荐
LIUENG1 小时前
Vue3 响应式原理
前端·vue.js
wycode2 小时前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
wycode3 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏3 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
pepedd8644 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
前端缘梦4 小时前
深入理解 Vue 中的虚拟 DOM:原理与实战价值
前端·vue.js·面试
HWL56794 小时前
pnpm(Performant npm)的安装
前端·vue.js·npm·node.js
柯南95275 小时前
Vue 3 reactive.ts 源码理解
vue.js
柯南95275 小时前
Vue 3 Ref 源码解析
vue.js
小高0075 小时前
面试官:npm run build 到底干了什么?从 package.json 到 dist 的 7 步拆解
前端·javascript·vue.js