Element 树形数据与懒加载 

  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>

 

posted @ 2020-04-07 14:46  魔豆吧  阅读(3057)  评论(0)    收藏  举报
Live2D