el-tree 插槽的筛选

最新推荐文章于 2024-05-17 15:33:19 发布

zhangtongxueya

最新推荐文章于 2024-05-17 15:33:19 发布

阅读量1k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/zhangtongxueya/article/details/126763302

版权

            <el-tree
                class="tree-deep"
                :data="treeData"
                ref="tree"
                :props="defaultProps"
                :filter-node-method="filterNode"
                default-expand-all
              >
                <div class="case-list-box" slot-scope="{ node, data }">
                  <div v-if="data.list">
                    <span
                      v-for="(item, index) in data.list"
                      @click="appClick(item)"
                      :key="index"
                    >
                      <img :src="item.icon" alt="" />
                      <i :class="currentAppId===item.id ? 'cax-select' : ''">
                        {{ item.label }}
                      </i>
                    </span>
                  </div>
                  <span v-else>
                    <span style="color: #4a4a4a">{{ node.label }} </span>
                    <span style="color: #82868b">
                      ({{ data.children[0].list.length > 0 ? data.children[0].list.length : 0 }})
                    </span>
                  </span>
                </div>
              </el-tree>

caseList: [
        {
          label: "EDA设计",
          children: [
            {
              label: "",
              list: [],
            },
          ],
        },
        {
          label: "三维设计",
          children: [
            {
              label: "",
              list: [],
            },
          ],
        },
        {
          label: "日常办公",
          children: [
            {
              label: "",
              list: [],
            },
          ],
        },
        {
          label: "仿真处理",
          children: [
            {
              label: "",
              list: [],
            },
          ],
        },
      ],

this.treeData = caseList

inputChange(val) {
      this.treeData = []
      this.caseList.forEach((item, i) => {
        const params = {
          label: item.label,
          children: []
        }
        if(item.children && item.children.length) {
          item.children.forEach((item2, index2) => {
            params.children[index2] =  params.children[index2] || []
            params.children[index2].label = item2.label
            params.children[index2].list = params.children[index2].list || []
            if(item2.list && item2.list.length) {
              params.children[index2].list = item2.list.filter(item3 => {
                return item3.label.toLowerCase().indexOf(val.toLowerCase()) > -1
              })
            }
          })
        }
        this.treeData.push(params)
      })
    },