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