wl-vue-select,wl-tree-select
用于vue框架的树形下拉框及带全选的普通下拉框。
Tree drop-down box for vue framework and ordinary drop-down box with select all.
本组件提供全选下拉框和树形下拉框功能。
wlVueSelect
这是一个基于 elementUi 的 el-select 组件的二次封装的下拉框,提供了全选功能和默认选中功能;
wlTreeSelect
这是一个基于 elementUi 的 el-tree 组件的二次封装的下拉框,提供了树形数据支持和默认选中功能;
因这两个需求非常普遍,所以作为一个独立插件发布。
el-select
0.4.8 修复树形下拉框,子节点全部选中时,父节点无法取消的问题
npm i wl-vue-select --save
npm i wl-vue-select -S
import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
<wlVueSelect
v-model="value"
:props="props"
:data="data"
multiple
default-select
></wlVueSelect>
<p>----------分割线------------</p>
<wlTreeSelect
width="240"
checkbox
:data="treeData"
@change="hindleChanged"
v-model="selected"
></wlTreeSelect>
data() {
return {
value: [], // 选中值
data: [
id: 1,
name: "海边"
id: 2,
name: "森林"
id: 3,
name: "草原"
id: 4,
name: "古城"
], // 数据
props: {
label: "name",
value: "id"
}, // 配置
treeData: [
id: "love",
name: "所有和你走过的风光",
children: [
id: 1,
name: "海边",
children: [
id: 5,
name: "蓬莱",
id: 2,
name: "森林"
id: 3,
name: "草原"
id: 4,
name: "古城"
selected: [ "1" ]// 树下拉框选中数据
methods: {
hindleChanged(val){
console.log(val,2)
console.log(this.selected)