目录

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

效果图:

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
天生我材必有用_吴用17 分钟前
Vue 3 国际化实战:支持 Element Plus 组件和语言持久化
前端·javascript·vue.js
搬砖-无恙35 分钟前
vue+uniapp 获取上一页直接传递的参数
前端·vue.js·uni-app
bin91531 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的日历(Calendar)
前端·javascript·vue.js·ecmascript·deepseek
用户841794814562 小时前
修改 vxe-table 单元格高度的几种方式
vue.js
程序猿chen3 小时前
Vue.js组件化开发实战:从工程化到安全纵深设计
前端·vue.js·安全
BillKu3 小时前
vue3中watch的使用示例
前端·javascript·vue.js
掘金归海一刀4 小时前
thinkphp6+elementui实现多图片压缩包下载
前端·vue.js·thinkphp
苏州第一深情4 小时前
【vue+leaflet】常用的系统方法属性及常见问题(四)
前端·javascript·vue.js
pink大呲花5 小时前
Vue.js 中 v-model 的使用及其原理
前端·javascript·vue.js
hepherd5 小时前
Vue学习笔记 - 深入组件 - 注册,透传Attribute,异步组件
前端·vue.js