vue-authority-table-tree

sxy

install

 # install dependencies
npm install vue-authority-table-tree --save

import tableTree from 'vue-authority-table-tree'

Vue.use(tableTree)

Example

 <template>
  <!-- sxy -->
  <table-tree
    ref="treeDataRef"
    :treeData="treeData"
  ></table-tree>
  <div class="bottomButton">
    <el-button type="primary" @click="submitFunc()">提交</el-button>
    <el-button type="primary" @click="clearBtn()">清空</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [],
      treeProps: {
    	children: "children",
		text: "treeName",
		id: "treeId",
	  },
      selectData:[],
    }
  },
  created(){
    // 获取树形结构数据
    getData().then(res => {
      this.treeData = [
        {
          "treeId": 97,
          "parentId": 0,
          "treeName": "app管理",
          "children": [
            {
              "treeId": 98,
              "parentId": 97,
              "treeName": "app类目管理"
            },
            {
              "treeId": 99,
              "parentId": 97,
              "treeName": "app版本管理",
              "children": [
                {
                  "treeId": 100,
                  "parentId": 99,
                  "treeName": "app版本列表"
                },
                {
                  "treeId": 101,
                  "parentId": 99,
                  "treeName": "新增版本"
                }
              ]
            }
          ]
        }
      ]
    })
  },
  methods: {
    submitFunc() {
      // 获取已选择的权限数据-数组
      this.selectData = this.$refs.treeDataRef.updateSelectTreeData();
    },
    clearBtn() {
      // 清空已选择数据
	  this.$refs.treeDataRef.resetSelectTreeData()
	},
  },
}
</script>

Props

Props	type	description
treeData	Array	Tree structure data
treeProps	Object	tree props

Methods

 <table-tree
  ref="treeDataRef"
  :treeData="treeData"
></table-tree>

this.$refs.treeDataRef.updateSelectTreeData();
this.$refs.treeDataRef.resetSelectTreeData();

method name	params	description
updateSelectTreeData	null	get select Data
resetSelectTreeData	null	reset select Data

Keywords

role-authority tree table-tree vue-components authority-table-tree