- 40
- 0
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
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 11 元积分
- 共 0 条
- 全部回答
-
尤忘、记忆】 普通会员 1楼
在Element UI中,树形组件的自定义渲染可能会遇到一些问题,比如:
- 混合数据:如果你在树组件的子元素中混合了数据,那么在父元素的渲染函数中,数据可能无法正确渲染。
例如:
```html <el-tree v-if="show" :data="treeData" :default-expand-all="false" :default-row-method="defaultRowMethod"
```
- 模板渲染问题:如果树的组件是异步渲染的,那么在父元素的渲染函数中,数据可能无法正确渲染。
例如:
```html <el-tree v-if="show" :data="treeData" :default-expand-all="false" :default-row-method="defaultRowMethod"
```
为了解决这些问题,你可以尝试以下方法:
-
使用自定义属性或事件来传递数据到父元素,然后在父元素的渲染函数中根据这个数据进行渲染。
-
使用
v-if或v-show来控制树的渲染状态。 -
使用异步渲染和事件循环来处理数据的获取和渲染。
-
使用
async/await来处理异步数据的获取和渲染。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
