阅读:2705回复:0
让VUE element 树状菜单 可以行选,可以按行点击选择
默认代码:
<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},{}); } }, |
|