1. 程式人生 > >vue+elementUI樹形表格授權

vue+elementUI樹形表格授權

效果圖:

gitHub地址:https://github.com/Echo987/vue-tableAuthor

根據花褲衩的樹形表格改的:

新建vue元件:

<template>
  <div class="app-container">
    <tree-table :data="data" :columns="columns" border @getAuth="getAuth"></tree-table>

  </div>
</template>

<script>
/**
  Auth: Leiy
  Created: 2018/09/29-11:25
  Explain:根據花褲衩的表格改的,
  isIndeterminate屬性是控制多選半選中狀態,
  checkAll是控制全選中狀態
  selectchecked是放置sonData1選中項
*/
import treeTable from '@/components/TreeTableAuthor'

export default {
  name: 'treeTableDemo',
  components: { treeTable },
  data () {
    return {
      columns: [
        {
          text: '選單列表',
          value: 'description',
          width: 200,
          option: 'sonData1'
        },
        {
          text: '功能許可權',
          value: 'sonData1',
          option: 'sonData1',
          act: 'act'
        }
      ],
      data: [
        {
          type: 0,
          'checked': false,
          'id': '1',
          'description': '使用者管理',
          isIndeterminate: false,
          checkAll: false,
          act: '全選',
          children: [
            {
              type: 1,
              id: 6,
              'description': '使用者列表',
              'parentId': '-1',
              'checked': false,
              selectchecked: ['7'],
              checkAll: false,
              isIndeterminate: false,
              'sonData1': [
                {
                  type: 2,
                  'description': '使用者新增',
                  'parentId': '6',
                  'checked': false,
                  'id': '7'

                },
                {
                  type: 2,
                  'description': '使用者修改',
                  'parentId': '6',
                  'checked': false,
                  'id': '8'
                },
                {
                  type: 2,
                  'description': '使用者刪除',
                  'parentId': '6',
                  'checked': false,
                  'id': '9'
                }
              ]
            },
            {
              type: 1,
              id: 13,
              'description': '角色列表',
              'parentId': '-1',
              'checked': false,
              selectchecked: ['10', '11', '12'],
              checkAll: false,
              isIndeterminate: false,
              'sonData1': [
                {
                  type: 2,
                  'description': '角色授權',
                  'parentId': '6',
                  'checked': false,
                  'id': '10'

                },
                {
                  type: 2,
                  'description': '角色修改',
                  'parentId': '6',
                  'checked': false,
                  'id': '11'
                },
                {
                  type: 2,
                  'description': '角色刪除',
                  'parentId': '6',
                  'checked': false,
                  'id': '12'
                }
              ]
            }
          ]
        },
        {
          type: 0,
          'checked': false,
          'id': '2',
          'description': '裝置管理',
          isIndeterminate: false,
          checkAll: false,
          act: '全選',
          children: [
            {
              type: 1,
              id: 6,
              'description': '裝置列表',
              'parentId': '-1',
              'checked': false,
              selectchecked: [],
              checkAll: false,
              isIndeterminate: false,
              'sonData1': [
                {
                  type: 2,
                  'description': '裝置新增',
                  'parentId': '6',
                  'checked': false,
                  'id': '17'

                },
                {
                  type: 2,
                  'description': '裝置修改',
                  'parentId': '6',
                  'checked': false,
                  'id': '18'
                },
                {
                  type: 2,
                  'description': '裝置刪除',
                  'parentId': '6',
                  'checked': false,
                  'id': '19'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  created () {

  },
  methods: {
    getAuth (data) {
      let opt = []
      data.forEach(val => {
        opt.push(val.id)
        if (val.children) {
          val.children.forEach(el => {
            console.log(val.id)
            if (el.selectchecked.length) {
              opt.push(el.id)
              opt.push(el.selectchecked)
            }
          })
        }
      })
      console.log(data)
      opt = opt.join().split(',').filter(n => { return n })
      console.log(opt)
    }
  }
}
</script>