gogogo
管理员
管理员
  • UID25
  • 粉丝0
  • 关注0
  • 发帖数1377
阅读:2028回复:0

让VUE element 树状菜单 可以行选,可以按行点击选择

楼主#
更多 发布于:2020-12-12 09:01
默认代码:
<el-input placeholder="输入关键字进行过滤" v-model="filterText" />
<el-tree
                node-key="gbcode"
                class="filter-tree"
                :style="{ height: '600px', overflow: 'auto' }"
                show-checkbox
                :data="cameraListState.cameraTreeDataList.data"
                :props="defaultProps"
                :filter-node-method="filterNode"  //关键词搜索功能
                :default-expand-all="true"
                @check="onCheckChange"   // 默认勾选
                @node-click="onNodeClick"  //按行选择
                ref="cameraTree"
              >
              </el-tree>

JS:
data:

defaultProps: {
        children: "children",
        label: "label"
},
filterText: "",


watch: {
    filterText(val) {
           this.$refs.cameraTree.filter(val);
    }
 },
methods:

filterNode(value, data) {     //关键词搜索
           if (!value)    return true;
           return data.label.indexOf(value) !== -1;
 },

onCheckChange(data, check, component) {
      let checkedNodes = [];
      check.checkedNodes.forEach(item => {
        if (!item.hasOwnProperty("children")) {
          item.id = item.hasOwnProperty("gbcode") ? item.gbcode : item.code;
          checkedNodes.push(item);
        }
      });



onNodeClick(data, node, component) {    
  //只针对子节点操作label点击也勾选的功能
      if (!data.hasOwnProperty("children")) {      
           let checkedNodes = [...this.$refs.cameraTree.getCheckedNodes(true)];
          //已勾选再点击则去掉        
            const result = checkedNodes.some(node => {
                     if (node.gbcode === data.gbcode) {                 return true;
                     }      
             });
          if (result) {  
           checkedNodes = checkedNodes.filter(node => {
                      return node.gbcode !== data.gbcode;
              });
                        // console.log(checkedNodes);
              } else {        
                     checkedNodes.push(data);    //未勾选时点击添加
             }
                   // console.log(checkedKeys);
            this.$refs.cameraTree.setCheckedNodes(checkedNodes);
            this.onCheckChange({},{checkedNodes},{});      }
    },
游客


返回顶部