vue-selectl
Demo
vue-selectl base on Vue 2
Install
npm install vue-selectl --save
How to use
Attributes
| parameter | explain | type | optional | default |
|---|---|---|---|---|
| customdatas | custom data | array | - | [] |
| initcurlists | init data | array | - | [] |
| limit | choose up to a few | number | - | 0 |
Events
| even name | explain | callback |
|---|---|---|
| checkitem | listen to selection | array |
| updateinit | listen to change initcurlists | array |
Methods
| method name | explain | optional |
|---|---|---|
| reset | do reset | array[id] |
- use script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./dist/styles.css" />
</head>
<body>
<div id="app">
<vue-selectl :customdatas="datas" @checkitem="checkItem" @updateinit="changeCurLists" :initcurlists="curLists" :limit="limit" ref="vueSelectl"></vue-selectl>
<button @click="add">add</button>
<button @click="reset">reset</button>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="./dist/vue-selectl.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data () {
return {
curLists: [],
limit: 5,
datas: {
name: '所有部门',
checked: false,
id: 1,
parentId: null,
nodeSelectNotAll: false,
englishName: 'all',
child: [
{
name: '行政部',
checked: false,
id: 2,
parentId: 1,
nodeSelectNotAll: false,
englishName: 'Administration Department',
child: [
{
name: '行政管理',
checked: false,
id: 3,
parentId: 2,
nodeSelectNotAll: false,
englishName: 'Administrative Management',
child: [
{
name: '风风',
checked: false,
id: 4,
parentId: 3,
nodeSelectNotAll: false,
englishName: 'Feng Feng'
},
{
name: '后勤管理',
checked: false,
id: 5,
parentId: 3,
nodeSelectNotAll: false,
englishName: 'Logistics Management',
child: [
{
name: '行政安全',
checked: false,
id: 16,
parentId: 5,
nodeSelectNotAll: false,
englishName: 'Administrative Security',
child: [
{
name: '卡拉',
checked: false,
id: 17,
parentId: 16,
nodeSelectNotAll: false,
englishName: 'Ka La'
},
{
name: '乒乓',
checked: false,
id: 18,
parentId: 16,
nodeSelectNotAll: false,
englishName: 'Ping Pang'
}
]
}
]
}
]
},
{
name: '企业文化',
checked: false,
id: 6,
parentId: 2,
nodeSelectNotAll: false,
englishName: 'Corporate Culture',
child: [
{
name: '企业活动',
checked: false,
id: 7,
parentId: 6,
nodeSelectNotAll: false,
englishName: 'Enterprise Activity',
child: [
{
name: '日常活动',
checked: false,
id: 19,
parentId: 7,
nodeSelectNotAll: false,
englishName: 'Daily Activities',
child: [
{
name: '小健',
checked: false,
id: 20,
parentId: 19,
nodeSelectNotAll: false,
englishName: 'Xiao Jian'
},
{
name: '小东',
checked: false,
id: 21,
parentId: 19,
nodeSelectNotAll: false,
englishName: 'Acron'
}
]
}
]
},
{
name: '企业宣传',
checked: false,
id: 8,
parentId: 6,
nodeSelectNotAll: false,
englishName: 'Enterprise Propaganda',
child: [
{
name: '宣传文案',
checked: false,
id: 22,
parentId: 8,
nodeSelectNotAll: false,
englishName: 'Propaganda copy',
child: [
{
name: '哈利',
checked: false,
id: 23,
parentId: 22,
nodeSelectNotAll: false,
englishName: 'Ha Li'
},
{
name: '米妮',
checked: false,
id: 24,
parentId: 22,
nodeSelectNotAll: false,
englishName: 'Minnie'
}
]
}
]
}
]
}
]
},
{
name: '财务部',
checked: false,
id: 9,
parentId: 1,
nodeSelectNotAll: false,
englishName: 'Finance Department',
child: [
{
name: '税务管理',
checked: false,
id: 10,
parentId: 9,
nodeSelectNotAll: false,
englishName: 'Tax Administration',
child: [
{
name: '张三',
checked: false,
id: 11,
parentId: 10,
nodeSelectNotAll: false,
englishName: 'Zhang San'
},
{
name: '李四',
checked: false,
id: 12,
parentId: 10,
nodeSelectNotAll: false,
englishName: 'Halen'
}
]
},
{
name: '财务管理',
checked: false,
id: 13,
parentId: 9,
nodeSelectNotAll: false,
englishName: 'Financial Management',
child: [
{
name: '李李',
checked: false,
id: 14,
parentId: 13,
nodeSelectNotAll: false,
englishName: 'Aline Ly'
},
{
name: '赵六',
checked: false,
id: 15,
parentId: 13,
nodeSelectNotAll: false,
englishName: 'Zhao Liu'
}
]
}
]
}
]
}
}
},
mounted () {
// this.curLists.push(436)
this.curLists = [4, 17, 20, 24, 23, 11]
},
methods: {
checkItem: function (datas) {
console.log('checkItem', datas)
},
add () {
this.curLists.push(13)
// this.curLists = [20, 24]
},
reset () {
this.$refs.vueSelectl.reset([4, 17])
},
changeCurLists (value) {
console.log(value)
}
}
});
</script>
</html>- webpack
import VueSelectl from 'vue-selectl'
import 'vue-selectl/dist/styles.css'
Vue.use(VueSelectl)