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