vue2和vue3 tree（使用插槽）和（过滤搜索关键字）的区别_slot-scope="{ node, data }" vue3

一、vue2和vue3 slot-scope插槽的使用

1.vue2

vue2 使用slot-scope=“{node, data }"

  <el-input placeholder="输入关键字进行过滤" v-model="filterText">
  <el-tree :data="menus" show-checkbox node-key="id" :filter-node-method="filterNode">
      <div slot-scope="{node, data }"  class="custom-tree-node" >
      <!--字数限制 （9）-->
            <div class="nodelabel" :title="node.label">{{ node.label | ellipsis(9)}}</div>
            <div v-if="data.num>0">({{data.num}})</div>
      </div>
   </el-tree>
1
2
3
4
5
6
7
8

补充：设置字数限制(可通过js过滤和css样式)

//js
 filters: {
    /**树节点长度过滤器 */
   ellipsis(val, len) {
   if (!val) return "";
      val = val.toString();
      if (val.length > len) {
         return val.slice(0, len) + "...";
          }
     return val;
  },
 }
1
2
3
4
5
6
7
8
9
10
11
12

 .nodelabel{
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
1
2
3
4
5
6

2.vue3

vue3 使用 #default=“{node, data }"

 <el-input placeholder="输入关键字进行过滤" v-model="filterText">
 <el-tree :filter-node-method="filterNode" ref="treeRef" class="datatree"
           :data="tree"
      >
        <template #default="{ node }">
          <span class="nodelabel" :title="node.label">{{ node.label }}</span
          >
        </template>
   </el-tree>
1
2
3
4
5
6
7
8
9

一、vue2和vue3 tree过滤搜索关键字的使用

1.vue2

  filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
1
2
3
4

2.vue3

const filterText = ref("");
const treeRef = ref(null);
const filterNode = (query, node) => {
  if (!query) return true;
  return node.label.includes(query);
};
//监听
watch(filterText, (val) => {
  treeRef.value.filter(val);
});
···
1
2
3
4
5
6
7
8
9
10
11