iview实现表格可编辑

太过爱你忘了你带给我的痛 2022-12-06 01:27 785阅读 0赞

**iview要实现table可编辑，使用render函数进行渲染，非常简单,希望对大家有所帮助。**

**一、效果图如下**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70_pic_center]

**二、render函数使用方法**

1.  h: vue Render函数的别名（全名 createElement）即 Render函数
2.  params： table 该行内容的对象
3.  props：设置创建的标签对象的属性
4.  style：设置创建的标签对象的样式
5.  on：为创建的标签绑定事件

**三、使用方法**

//创建一个表格
    <Table border :columns="columns" :data="tableData" height="700"></Table>
    //data中定义columns
    comColumns:[
    //实现select
    	{
              key: 'sclx',
              title: '生产类型',
              width: 120,
              render: (h, params) => {
                return h('Select', {        //创建一个select下拉框
                  props:{                   //定义select的属性
                    placeholder:'生产类型',
                    value:this.tableData[params.index].sclx       //初始化给下拉框赋值
                  },
                  on: {                     //给select添加事件
                      'on-change':(event) => {
                          this.tableData[params.index].sclx = event;      //选择option给value赋值
                      }
                  },
                },
                  this.sclxList.map((type)=>{          //循环展示下拉框数据   this.sclxList是从后台获取到的数据
                      return h('Option', {
                          props:{
                              value:type.ywzfl,
                              label:type.zfllc
                          }
                      }, type);
                  })
                )
              }
            },
    //实现input
    	{
              key: 'lxdh',
              title: '联系电话',
              width: 100,
              render:(h,params)=>{
                return h('Input',{
                  props:{
                    placeholder:'联系电话',
                    value:this.tableData[params.index].lxdh
                  },
                  on:{
                    'input':(val)=>{
                      this.tableData[params.index].lxdh = val;
                    }
                  }
                })
              }
            },
    //实现日期选择器
    	{
              key: 'fhsj',
              title: '发货时间',
              width: 120,
              render: (h, params) => {
                return h('div',[
                  h('DatePicker',{
                    props:{
                      placeholder:'发货时间',
                      value:this.tableData[params.index].fhsj
                    },
                    on:{
                      'on-change':(date)=>{
                          this.tableData[params.index].fhsj = date;
                          this.tableData[params.index].isEdit = true;
                      }
                    }
                  })
                ]);
              }
            },
    ]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDExMTg2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c0ac57df8b99419dbaebdedfb67d834c.png