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>

   
   
   

  
  
  

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>

}

   
   
   

  
  
  

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