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">=></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">=></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