vue使用el-tree实现全选、反选

vue使用el-tree实现全选、反选

• 下拉树全选、反选
• 根据输入字符过滤

<el-dialog
        class="dialog"
        :title="upLowTitle"
        :visible.sync="upLowVisble"
        width="40%"
        :before-close="handleClose"
        :close-on-click-modal="false"
      >
        <!-- custom-class="dialog-height" -->
        <div class="tree-layout">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
          <div class="tree">
            <!-- :load="upLowLoad"
            lazy-->
            <el-tree
              :data="channels"
              ref="channelTree"
              :props="channelProps"
              @check-change="upper_lowerChange"
              :default-expanded-keys="['']"
              default-expand-all
              :filter-node-method="filterNode"
              show-checkbox
              :indent="16"
              v-loading="upLowLoading"
              node-key="id"
            ></el-tree>
          </div>
        </div>
        <span slot="footer" class="dialog-footer dialog-tools">
          <el-button type="success" @click="checkAll">全选</el-button>
          <el-button type="warning" @click="inverse">反选</el-button>
          <el-button type="primary" @click="shelves">上架</el-button>
          <el-button type="danger" @click="obtained">下架</el-button>
          <el-button @click="upLowCancel">取消</el-button>
        </span>
      </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

export default {
  mixins: [listMixins],
  data() {
      return {
          upLowVisble: false, // 上下架显隐开关
          filterText: "", // 过滤字段
          channels: [], // 栏目初始数据
          channelProps: {
            label: "name",
            children: "children",
            isLeaf: "isChild",
            id: "id"
          },
          flag: false, // 属性是否选中标识
          isCheck: false,
          upLowLoading: true, // 遮罩层
          upLowTitle: "" // 上下架面板标题
      }
  },
    methods: {
		// 上下架弹窗
        add() {
          this.upLowVisble = true;
          this.upLowLoad(); // 加载栏目列表
        },
        // 渲染树
        upLowLoad() {
          let that = this;
          this.upLowLoading = true;
          axios
            .post(this.$api.allChannelList)
            .then(res => {
              this.upLowLoading = false;
              that.channels = res.body;
            })
            .catch(err => {
              this.upLowLoading = false;
            });
        },
    <span class="token comment">// 上下架树加载</span>
    <span class="token function">upper_lowerChange</span><span class="token punctuation">(</span>node<span class="token punctuation">,</span> checkStatus<span class="token punctuation">,</span> childStatus<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>checkStatus<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>currentCheckChannelId <span class="token operator">=</span> node<span class="token punctuation">.</span>id<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 上下架节点过滤</span>
    <span class="token function">filterNode</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>value<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> data<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 全选或反选</span>
    <span class="token function">checkAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>channelTree<span class="token punctuation">.</span><span class="token function">setCheckedNodes</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>channels<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 全选处理方法</span>
    <span class="token function">batchSelect</span><span class="token punctuation">(</span>nodes<span class="token punctuation">,</span> refs<span class="token punctuation">,</span> flag<span class="token punctuation">,</span> seleteds<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> nodes <span class="token operator">!=</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        nodes<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>element <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
          refs<span class="token punctuation">.</span><span class="token function">setChecked</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> flag<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>

      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> seleteds <span class="token operator">!=</span> <span class="token string">"undefined"</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        seleteds<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>node <span class="token operator">=&gt;</span> <span class="token punctuation">{<!-- --></span>
          refs<span class="token punctuation">.</span><span class="token function">setChecked</span><span class="token punctuation">(</span>node<span class="token punctuation">,</span> <span class="token operator">!</span>flag<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 反选</span>
    <span class="token function">inverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>channelTree<span class="token punctuation">;</span>
      <span class="token keyword">let</span> nodes <span class="token operator">=</span> res<span class="token punctuation">.</span><span class="token function">getCheckedNodes</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">batchSelect</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>channels<span class="token punctuation">,</span> res<span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">,</span> nodes<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 上架</span>
    <span class="token function">shelves</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 下架</span>
    <span class="token function">obtained</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">}</span><span class="token punctuation">,</span>

    <span class="token comment">// 取消</span>
    <span class="token function">upLowCancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>upLowVisble <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>channels <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    
<span class="token punctuation">}</span><span class="token punctuation">,</span>
watch<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 根据关键词过滤</span>
    <span class="token function">filterText</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">[</span><span class="token string">"channelTree"</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

https://blog.csdn.net/qq_31584291/article/details/87939912