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

效果图:

相关推荐
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色10 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
G_whang11 小时前
jenkins部署前端vue项目使用Docker+Jenkinsfile方式
前端·vue.js·jenkins
荔枝荔枝荔枝11 小时前
【Vue源码学习】Vue新手友好!为什么vue2 this能够直接获取到data和methods中的属性?
vue.js·源码
寻觅~流光12 小时前
封装---统一封装处理页面标题
开发语言·前端·javascript·vue.js·typescript·前端框架·vue
江上暮云12 小时前
手摸手带你彻底搞懂Vue的响应式原理
vue.js
恰薯条的屑海鸥12 小时前
前端进阶之路-从传统前端到VUE-JS(第五期-路由应用)
前端·javascript·vue.js·学习·前端框架
wangpq12 小时前
Echart饼图自动轮播效果封装
javascript·vue.js