element-plus tree组件使用

周星星9527

发布于 2021-09-29 15:55:52

2.1K0

发布于 2021-09-29 15:55:52

粒子，修改自cascader：

<html>
<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
  <!-- Import component library -->
  <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>
  <body>
    <div id="app">
      <div class="block">
        <span class="demonstration">单选选择任意一级选项</span>
        <el-cascader
          :options="options"
          :props="{ checkStrictly: true }"
          clearable>
        </el-cascader>
        <el-tree
            ref="tree"
            :data="options"
            show-checkbox
            node-key="id"
            default-expand-all
            :props="{ label: 'label' }"
          >
        </el-tree>
      </div>
    </div>
    <script>
    var dist=[
      {value:0,label:'桂林',id:0,parentId:null},
      {value:1,label:'南宁',id:1,parentId:null},
      {value:2,label:'尧山',id:2,parentId:0},
      {value:3,label:'七星',id:2,parentId:0},
      {value:4,label:'西乡塘',id:2,parentId:1},
    ];
    
    const getTreeMenu=(rootList, id, list)=> {
        for (let i = 0; i < rootList.length; i++) {
            let item = rootList[i]
            if (String(item.parentId) == String(id)) {
                list.push(item);
            }
        }
        list.map(item => {
            item.children = []
            getTreeMenu(rootList, item.id, item.children)
            if (item.children.length == 0) {
                delete item.children;
            }
        })
        return list;
    }

    var arr=[];
    getTreeMenu(dist,null,arr);
    console.log(arr);

      const App = {
        data() {
          const state = Vue.reactive({options: arr});
          return {
            ...state,
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
</script>
  </body>
</html>

运行结果

官方粒子：

https://element-plus.org/zh-CN/component/tree.html#%E8%8A%82%E7%82%B9%E8%BF%87%E6%BB%A4

如下：

<template>
  <el-input v-model="filterText" placeholder="Filter keyword" />

  <el-tree
    ref="tree"
    class="filter-tree"
    :data="data"
    :props="defaultProps"
    default-expand-all
    :filter-node-method="filterNode"
  />
</template>

<script lang="ts">
export default {
  data() {
    return {
      filterText: '',
      data: [
        {
          id: 1,
          label: 'Level one 1',
          children: [
            {
              id: 4,
              label: 'Level two 1-1',
              children: [
                {
                  id: 9,
                  label: 'Level three 1-1-1',
                },
                {
                  id: 10,
                  label: 'Level three 1-1-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: 'Level one 2',
          children: [
            {
              id: 5,
              label: 'Level two 2-1',
            },
            {
              id: 6,
              label: 'Level two 2-2',
            },
          ],
        },
        {
          id: 3,
          label: 'Level one 3',
          children: [
            {
              id: 7,
              label: 'Level two 3-1',
            },
            {
              id: 8,
              label: 'Level two 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
  },
}
</script>

element plus

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-25，如有侵权请联系 cloudcommunity@tencent.com 删除