可收缩树形菜单

导入方法

进入项目：

npm install [email protected]  --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值|-