Element 树形数据与懒加载

本文转载自查看原文 2020-04-07 14:46 2489

  1 <template>
  2 <div>
  3   <el-table
  4     :data="tableData"
  5     style="width: 100%;margin-bottom: 20px;"
  6     row-key="id"
  7     border
  8     default-expand-all
  9     :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
 10     <el-table-column
 11       prop="date"
 12       label="日期"
 13       sortable
 14       width="180">
 15     </el-table-column>
 16     <el-table-column
 17       prop="name"
 18       label="姓名"
 19       sortable
 20       width="180">
 21     </el-table-column>
 22     <el-table-column
 23       prop="address"
 24       label="地址">
 25     </el-table-column>
 26   </el-table>
 27 
 28   <el-table
 29     :data="tableData1"
 30     style="width: 100%"
 31     row-key="id"
 32     border
 33     lazy
 34     :load="load"
 35     :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
 36     <el-table-column
 37       prop="date"
 38       label="日期"
 39       width="180">
 40     </el-table-column>
 41     <el-table-column
 42       prop="name"
 43       label="姓名"
 44       width="180">
 45     </el-table-column>
 46     <el-table-column
 47       prop="address"
 48       label="地址">
 49     </el-table-column>
 50   </el-table>
 51 </div>
 52 </template>
 53 <script>
 54   export default {
 55     data() {
 56       return {
 57         tableData: [{
 58           id: 1,
 59           date: '2016-05-02',
 60           name: '王小虎',
 61           address: '上海市普陀区金沙江路 1518 弄'
 62         }, {
 63           id: 2,
 64           date: '2016-05-04',
 65           name: '王小虎',
 66           address: '上海市普陀区金沙江路 1517 弄'
 67         }, {
 68           id: 3,
 69           date: '2016-05-01',
 70           name: '王小虎',
 71           address: '上海市普陀区金沙江路 1519 弄',
 72           children: [{
 73               id: 31,
 74               date: '2016-05-01',
 75               name: '王小虎',
 76               address: '上海市普陀区金沙江路 1519 弄'
 77             }, {
 78               id: 32,
 79               date: '2016-05-01',
 80               name: '王小虎',
 81               address: '上海市普陀区金沙江路 1519 弄'
 82           }]
 83         }, {
 84           id: 4,
 85           date: '2016-05-03',
 86           name: '王小虎',
 87           address: '上海市普陀区金沙江路 1516 弄'
 88         }],
 89         tableData1: [{
 90           id: 1,
 91           date: '2016-05-02',
 92           name: '王小虎',
 93           address: '上海市普陀区金沙江路 1518 弄'
 94         }, {
 95           id: 2,
 96           date: '2016-05-04',
 97           name: '王小虎',
 98           address: '上海市普陀区金沙江路 1517 弄'
 99         }, {
100           id: 3,
101           date: '2016-05-01',
102           name: '王小虎',
103           address: '上海市普陀区金沙江路 1519 弄',
104           hasChildren: true
105         }, {
106           id: 4,
107           date: '2016-05-03',
108           name: '王小虎',
109           address: '上海市普陀区金沙江路 1516 弄'
110         }]
111       }
112     },
113     methods: {
114       load(tree, treeNode, resolve) {
115         setTimeout(() => {
116           resolve([
117             {
118               id: 31,
119               date: '2016-05-01',
120               name: '王小虎',
121               address: '上海市普陀区金沙江路 1519 弄'
122             }, {
123               id: 32,
124               date: '2016-05-01',
125               name: '王小虎',
126               address: '上海市普陀区金沙江路 1519 弄'
127             }
128           ])
129         }, 1000)
130       }
131     },
132   }
133 </script>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 element-ui 的 table 树形数据与懒加载不显示也不报错 element table树形数据不展示问题 element-ui 表格树形数据的展示和收起 vue+Element实现tree树形数据展示树形数据遍历 Java删除树形数据 vue树形结构懒加载树形数据库设计 elementUI之树形数据Table遇到的问题 vxe-table树形表格的懒加载