Element的table懒加载并按需更新节点数据

<el-table
    :data="tableData"
    row-key="id"
    ref="table"
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column label="操作">
       <template slot-scope="scope">
       		<!-- 如果有父节点才会有更新节点方法,因为只有父节点有过加载数据才能提供该方法 -->
			<el-tooltip v-if="scope.row.parentNode" content="更新节点数据" placement="top">
				<el-button
                   size="mini"
                   type="primary"
                   @click="updateItem(scope.row)"
                  >
                      更新节点数据
                  </el-button>
             </el-tooltip>
         </template>
     </el-table-column>
  </el-table>
export default {
    data() {
      return {
        tableData: [
	        {
	          id: 1,
	          date: '2016-05-02',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1518 弄'
	        },
	         {
	          id: 2,
	          date: '2016-05-04',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1517 弄'
	        }, 
	        {
	          id: 3,
	          date: '2016-05-01',
	          name: '王小虎',
	          address: '上海市普陀区金沙江路 1519 弄',
	          //	element用于判断是否可懒加载参数
	          hasChildren: true
	        }
	     ]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          //	模拟接口请求和数据
          const list = [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ]
          //	将懒加载方法所需数据记录,方便下次更新调用
          list.forEach(item => {
			item.parentNode = { tree, treeNode, resolve };	
		  })
          resolve(list);
        }, 1000)
      },
      updateItem(rowData) {
      	//	有父节点才能说明劫持了加载方法
      	const { parentNode } = rowData;
      	if (parentNode) {
      		const { tree, treeNode, resolve } = parentNode;
      		//	必须清空表格组件里当前层级的数据才能赋值
			this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, []);
			//	更新当前层级数据
          	this.loadTableChildren(tree, treeNode, resolve);
		}
      }
    },
  }

版权声明:本文为wzp20092009原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。