二期急救中没有实现的el-tree中的render树

最新推荐文章于 2023-07-07 18:31:58 发布

Fatfish_tree

最新推荐文章于 2023-07-07 18:31:58 发布

阅读量108

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Fatfish_tree/article/details/129285444

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章详细讨论了在Vue.js应用中，如何在el-tree的渲染函数renderContent内实现el-slider组件的双向绑定。通过对节点数据的处理和事件回调，确保了slider的值变化能实时更新到数据模型中。

摘要由CSDN通过智能技术生成

@* 树形控件render函数中el-slider的双向绑定没实现*@ @* <el-tree :data="scoreTableData.scoreTableTreeList" default-expand-all :render-content="renderContent"> </el-tree>*

function renderContent(h, { node, data, store }) { const aaa = '你好啊李银河' //console.log(node) return h('div', { attrs: { class: 'treeBox' } }, [ h('div', { attrs: { class: 'normalParentBox' } }, [ //一级 (data.Pid == undefined) && h("div", { attrs: { class: 'parentBox' } }, data.title), //二级 (data.Pid != undefined && data.children.length > 0) && h("div", { attrs: { class: 'sonBox' } }, data.title), //三级 (node.childNodes.length == 0) && h("div", { attrs: { class: 'grandsonBox' } }, [ h("div", {}, data.title), h("div", { attrs: { class: 'sliderScoreBox' } }, [ h("el-slider", { model: { value: Enumerable.From(node.data.Tags).FirstOrDefault("", item => item.Id === "Max").Max, callback: (value) => { this.$nextTick(() => { node.data.Tags.forEach(item => { item.Max = value console.log(item.Max) }) }) } }, props: { value: Enumerable.From(node.data.Tags).FirstOrDefault("", item => item.Id === "Max").Max, step: .5, max: Number(Enumerable.From(node.data.Tags).FirstOrDefault("", item => item.Id === "Max").Value) } }), h("span", { style: { marginLeft: '2rem' } }, Enumerable.From(node.data.Tags).FirstOrDefault("", item => item.Id == "Max").Value + '分'), ]) ]), ] ), ]); }