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:'杭州',
        }
    ],

效果图:

相关推荐
鹏多多1 小时前
Vue3响应式原理Proxy的深度剖析
前端·javascript·vue.js
百思可瑞教育3 小时前
ActiveMQ、RocketMQ、RabbitMQ、Kafka 的全面对比分析
vue.js·分布式·rabbitmq·rocketmq·activemq·北京百思可瑞教育·百思可瑞教育
li357410 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj11 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
萌萌哒草头将军14 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
Zz_waiting.17 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者18 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者18 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
weixin_4569042718 小时前
Vscode中开发VUE项目的调试方案
ide·vue.js·vscode
BillKu18 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js