基于element-tree-table树型表格点击节点请求数据展开树型表格
程序员文章站
2022-07-02 17:16:17
效果: 引用CSS、JS: Vue、element-ui、Axios treeTable: https://github.com/ProsperLee/element-tree-grid 模拟根据父id请求子数据的JSON: HTML部分: JS部分:// 注意属性表格要显示展开箭头需要加入 chi ......
效果:
引用css、js:
vue、element-ui、axios
treetable: https://github.com/prosperlee/element-tree-grid
模拟根据父id请求子数据的json:
1 // data.json 2 [{ 3 "id": "a1", 4 "name": "一级-1", 5 "parentid": "000" 6 }] 7 8 // node.json 9 [{ 10 "id": "123", 11 "name": "二级-1-1", 12 "parentid": "a1" 13 }, { 14 "id": "123", 15 "name": "二级-1-2", 16 "parentid": "a1" 17 }, { 18 "id": "123", 19 "name": "二级-1-3", 20 "parentid": "a1" 21 }]
html部分:
1 <div id="app"> 2 <el-table :data="data"> 3 <el-table-column type="index" label="#"></el-table-column> 4 <el-table-tree-column :remote="remote" prop="name" parent-key="parentid" label="name"></el-table-tree-column> 5 <el-table-column prop="name" label="name"></el-table-column> 6 </el-table> 7 </div>
js部分:// 注意属性表格要显示展开箭头需要加入 child_num 属性
1 new vue({ 2 el: "#app", 3 data: { 4 data: [] 5 }, 6 methods: { 7 remote(row, callback) { 8 var that = this; 9 axios.get("./json/node.json", null) 10 .then(function (response) { 11 row.child_num = response.data.length; // 父级有几个孩子 12 var count = row.depth+1; 13 response.data.foreach((element)=>{ // 循环孩子 14 // element.child_num = 1; 15 element.depth = count; 16 }) 17 var len = response.data.length; 18 for(var i = 0; i < len; i++){ 19 if(response.data[i].parentid == row.id){ 20 response.data.unshift(0,0); // 数组前面添加元素 21 array.prototype.splice.apply(that.data, response.data); // 指定位置拼接两个数组 22 break; 23 } 24 } 25 callback(that.data.filter(f => f['parentid'] == row['id'])) 26 }) 27 .catch(function (error) { 28 console.log(error); 29 }) 30 }, 31 // 获取根节点 32 getparentiddata(){ 33 var that = this; 34 axios.get("./json/data.json", null) 35 .then(function (response) { 36 response.data.foreach(element => { 37 element.child_num = 1; 38 element.depth = 0; 39 }); 40 that.data = response.data; 41 }) 42 .catch(function (error) { 43 console.log(error); 44 }) 45 } 46 }, 47 created() { 48 this.getparentiddata(); 49 }, 50 })