el-table默认展开行

最新推荐文章于 2024-09-14 12:05:57 发布

柒个橙子

最新推荐文章于 2024-09-14 12:05:57 发布

阅读量2.8k

点赞数

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_44680886/article/details/120973826

版权

这篇博客介绍了如何在Vue中利用Element-UI组件库动态加载并展示表格的子表格。通过监听表格展开事件，实现了根据需求加载子表格数据，并在数据变化时更新子表格内容。同时，详细讲解了如何设置row-key和expand-row-keys来管理和控制表格的展开状态。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
	<el-table ref="table" :data="tableData" :row-key="getRowKey" :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
		<el-table-column type="expand" fixed>
			<template slot-scope="scope">
		        <el-table :ref="`expandTableRef${scope.$index}`" :data="scope.row.expandTableData">
		            <el-table-column label="年龄" prop="age"></el-table-column>
		        </el-table>
			</template>
		</el-table-column>
		<el-table-column label="姓名" prop="name"></el-table-column>
	</el-table>
</template>
<script>
export default {
	data() {
		tableData: [{ name: '张三' }],
		// 获取row的key值
		getRowKey(row) {
			return row.id; // 返回当前行id
		},
		// 要展开的行，数值的元素是row的key值
		expandRowKeys: []
	},
	methods: {
		// 表格展开回调
        handleExpandChange(row, expandRow) {
        	// 如果当前展开行数组的长度为0，将expandRowKeys置空
            if(!expandRow.length) {
                this.expandRowKeys = [];
                return;
            }
            // expandRowKeys置空，把当前所有展开行的id push进数组
            this.expandRowKeys = [];
            expandRow.forEach(item => {
                this.expandRowKeys.push(item.id);
            });
            // 判断是否关闭当前行，关闭则不调接口
            if (expandRow.indexOf(row) == -1) {
            	// 将展开行表格数据置空，防止下一次展开后有上次遗留数据
                row.expandTableData = [];
                return;
            }
            // 调接口
            ···
            // 把接口返回数据赋给当前行expandTableData，作为展开子表格的数据
            row.expandTableData = d.data;
            // 强制刷新，解决第一次展开不显示数据的问题
            row.expandTableData.slice(0);
			···
        },
	}
}
</script>