elementui树形组件自定义渲染问题

element-ui自定义节点内容渲染的时候我要用一个switch组件,但是switch组件需要绑定一个boolean值,无论是通过renderContent (h, { node, data, store }) {}中的data还是外层data都无法取到值。通过console.logrenderContent(h, { node, data, store })data中的值,发现只能取到一次该值。

 <el-tree
    :data="data4"
    :props="defaultProps"
    show-checkbox
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    :render-content="renderContent">
</el-tree>
     data () {
    return {
      dialogFormVisible: false,
      cdAddress: '',
      cdName: '',
      data4: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }],
        value1: true,
        value2: true
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
        //   value1:true,
        //   value2:true
      }
    }
  },
methods: {
renderContent (h, { node, data, store }) {
      let _this = this
      console.log('*****************' + data.value1)
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 18px;">
          <span>
            <span>{node.label}<el-button style="font-size: 12px;" type="text" on-click={ () => this.append(data) }><span style="font-size: 20px;">+</span></el-button></span>
          </span>
          <span style="margin-right: 50px;">
            <el-button style="font-size: 12px;" type="text" on-click={ () => this.bianji(data) }>编辑</el-button>
            <el-button style="font-size: 12px;" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
          </span>
          <span>
              <el-switch
                  v-model="data.value1"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
          </span>
        </span>)
    }
}

打印出来的结果是

*****************true
*****************undefined
*****************undefined
阅读 3.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题