1.0.4 • Published 4 years ago
lhy-menu v1.0.4
可收缩树形菜单
导入方法
进入项目:
npm install lhy-menu@1.0.4 --registry=https://registry.npmjs.org/
main.js中:
import {LhyMenu} from 'lhy-menu'
Vue.use(LhyMenu)
基础用法
<LhyMenu :list="list" ref="menu" ></LhyMenu>
<button @click="handleSelctAll">全选</button>
<button @click="handleCancelAll">全不选</button>
<button @click="getCheckedNodes">获取选中菜单</button>
<script>
import {LhyMenu} from 'lhy-menu'
export default {
name:'index',
data() {
return {
msg: 'Hello,welcome to use 61tpl',
list: [
{
title: '父级1',
name: 'menu1',
children: [
{
title: '1-1',
name: 'menu1-1',
},
],
},
{
title: '父级2',
name: 'menu2',
children: [
{
title: '2-1',
name: 'menu2-1',
children: [
{
title: '2-1-1',
name: 'menu2-1-1',
children: [
{
title: '2-1-1-1',
name: 'menu2-1-1-1',
},
{
title: '2-1-1-2',
name: 'menu2-1-1-2',
},
{
title: '2-1-1-3',
name: 'menu2-1-1-3',
},
],
},
],
},
],
},
{
title: '父级3',
name: 'menu3',
children: [
{
title: '3-1',
name: 'menu3-1',
children: [
{
title: '3-1-1',
name: 'menu3-1-1'
},
{
title: '3-1-2',
name: 'menu3-1-2'
},
{
title: '3-1-3',
name: 'menu3-1-3'
},
],
},
],
},
{
title: '父级4',
name: 'menu4'
},
],
}
},
components:{
LhyMenu
},
methods:{
handleSelctAll(){
this.$refs.menu.selectAll('true')
},
handleCancelAll(){
this.$refs.menu.selectAll('false')
},
getCheckedNodes(){
this.checkedNodes = this.$refs.menu.getCheckedNodes();
console.log(this.checkedNodes)
}
}
}
</script>
参数
参数 | 说明 | 可选 | 默认 |
---|---|---|---|
list | 展示数据 | - | - |
方法
方法名 | 说明 | 参数 |
---|---|---|
selectAll | 对节点进行操作,选中所有节点或取消所有选中节点 | (isSelectAll)接收一个String类型参数,选中所有节点:'true',取消所有选中:'false'。 |
getCheckedNodes | 返回一个数组,元素为选中的节点的name值 | - |