iview table组件动态渲染，自定义表头以及动态绑定值

本文链接：https://blog.csdn.net/qq_31754591/article/details/122980095

❤️砥砺前行，不负余光，永远在路上❤️

自定义渲染官网给了两种方式，render 和 slot-scope，之前用过element 好像是使用 template 的时候里边可以直接v-model 双向绑定表格的值，iview 里边直接使用 v-model 好像并不能，我这项目用的是 3.x的后边的版本也没看。
在这里插入图片描述

一、使用slot-scope 自定义表格（绑定值）

动态绑定值，要结合on-change事件来设置，直接v-model="row.etd" 并不能改变表格里边每一行的值。

@on-change="setData($event, index, 'etd')"

    setData(e, index, type) {
      console.log(e, 'eee')
      this.tabledata[index][type] = e
      console.log(this.tabledata)
    },

在这里插入图片描述
使用的时候注意columns 就行

效果
在这里插入图片描述
如上图想要自定义表头，修改表头数据实现全部数据联动的话就需要自定义表头了

二、使用render自定义表格和下边header一样

在这里插入图片描述

render: (h, params) => {
            return h('DatePicker', {
              props: {   //参数
                type: 'date',
                value: params.row.payDate ? params.row.payDate : (this.currSelectCB[params.index] && this.allDateCB ? this.allDateCB : ''),
                // disabled: !this.currSelectCB[params.index],
                disabled: !params.row._checked,
                transfer: true
              },
              style: {
                width: '150px'
              },
              on: {
                'on-change': (val) => {
                  this.selectedId.forEach(item => {
                    if (item.id == params.row.id) {
                      item.payDate = val
                    }
                  })
                  console.log(this.selectedId)
                }
              }
            })
          }

三、自定义表头renderHeader

在官网可以看到使用 renderHeader 具体写法可以参考：

renderHeader: (h, param) => {
            return h('div', [
              h('span', {
                style: {
                  display: 'inline-block',
                  width: '50px'
                }
              }, 'ETD预配'),
              h('DatePicker', {
                props: {
                  // value: this.allDateSR,
                  transfer: true,
                },
                style: {
                  display: 'inline-block',
                  width: '105px'
                },
                on: {
                  'on-change': (value) => {
                    this.tabledata.forEach(v => {
                      v.etd = value  //修改所有表格数据
                    });
                  }
                }
              })
            ])
          },

在这里插入图片描述