Vue element ui el-tree给每个节点添加el-sider

element ui中,el-tree构建树,想给除去父节点的每个子节点添加滑动条el-slider。需要添加判断条件,需要node没有子节点,当然还可以根据自己的数据,添加约束条件。只有满足条件的子节点,才会在后面添加滑动条

 <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        ref="tree"
        default-expand-all
        :check-strictly="true"
        :expand-on-click-node="false"
        :check-on-click-node="false"
        :props="defaultProps"
        :default-checked-keys="defaultchecked"
        @check-change="ctrlNodeInfo"
      >
        <span class="custom-tree-node" slot-scope="{ node }">
          <span @click="flyToTile(node)">{{ node.label }}</span>
          <template
            v-if="
              node.childNodes.length === 0 &&
                node.data.id.split('-')[0] !== '4' &&
                node.data.id.split('-')[0] !== '5'
            "
          >
            <span class="spanSlider">
              <el-slider
                v-model="node.data.alpha"
                v-show="node.checked"
                :show-tooltip="false"
                :step="0.001"
                :format-tooltip="formatTooltip"
                @change="updateAlpha($event, node)"
              ></el-slider>
            </span>
          </template>
        </span>
      </el-tree>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue el-tree组件是一个支持层级树结构的组件,可以用于展示组织结构、文件目录等树型结构。给每个节点后面添加输入框的需求可能是为了让用户编辑节点的名称或其他信息。实现这个需求的步骤如下: 1. 在el-tree中的node默认插槽中添加一个输入框,如下: ``` <el-tree :data="data"> <template slot="node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-input v-model="node.name"></el-input> </template> </el-tree> ``` 2. 在data中添加需要修改的节点的name属性,然后在用户编辑输入框中的内容时实时更新该节点的name属性,如下: ``` data() { return { data: [ { label: '第一层', children: [ { label: '第二层', children: [ { label: '第三层', name: '节点名称' } ] } ] } ] } } ``` ``` <el-tree :data="data"> <template slot="node" slot-scope="{ node, data }"> <span>{{ node.label }}</span> <el-input v-model="node.name"></el-input> </template> </el-tree> ``` 3. 在用axios发送保存请求时,将修改的节点数据传给后端,让后端修改相应节点的数据,如下: ``` methods: { saveNodeData(node) { axios.post('/api/saveNodeData', { node }).then(res => { console.log(res.data) }).catch(error => { console.log(error.response.data) }) } } ``` 通过以上几个步骤,即可实现在el-tree中给每个节点后面添加输入框并保存数据的功能。注意,这只是实现的一个思路,具体实现还需要结合项目实际情况进行调整和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值