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>

猜你喜欢

转载自blog.csdn.net/chenguizhenaza/article/details/112004093