前端基础学习-vue的render函数进行双向绑定

背景

在前面的文章中提到elementui中的table组件可以通过render-header来自定义表头，之前的效果是在表头添加了复选框，后面发现操作成功后应该支持清除勾选的操作，但是通过render函数渲染的元素没有办法进行双向绑定，我们只有通过自己手动通过v-bind和v-on事件实现双向绑定

代码部分

html

      <el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="renderHeader">
        <template slot-scope="scope">
          <span class="blue_txt" @click="handleDetail(scope.row)">{{scope.row.name}}</span>
        </template>
      </el-table-column>

data

js

    /** 表头增加复选框 */
    renderHeader (h, { column }) {
      return h(
        'span',
        [
          h('el-checkbox', {
            style: 'display:inline-flex;margin-right:15px;',
            // 实现双向绑定
            props: {
              value: this.czrChecked
            },
            on: {
              change: checked => {
                this.czrChecked = checked
                this.selectTableHeader(checked)
              }
              // change: this.selectTableHeader
            }
          }),
          h('span', column.label)
        ]
      )
    },
    /** 是否勾选表头 */
    selectTableHeader (checked) {
      // 如果checked为true则是勾选了对应的表头
      console.log(checked)
    },
    /** 取消勾选表头 */
    handleCancleSelectHeader () {
      this.czrChecked = false
    },