element-ui中el-table expand 手风琴效果，展开里面的内容或者table,展开下一个,上一个自动收起

最新推荐文章于 2024-08-13 20:33:31 发布

漂移的电子

最新推荐文章于 2024-08-13 20:33:31 发布

阅读量3.7k

点赞数

分类专栏： element ui/vue-elemnt-admin 文章标签：前端

本文链接：https://blog.csdn.net/weixin_40030173/article/details/109238630

版权

element ui/vue-elemnt-admin 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在 Vue.js 框架下使用 Element UI 库实现表格行的展开与收起功能。通过绑定 `ref` 和调用 `toggleRowExpansion` 方法，实现了点击按钮切换表格行的展开状态，同时提供了详细的代码示例，包括模板、样式和方法。示例中展示了包含子列表的表格行，并在操作列中添加了展开和收起按钮。

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

在这里插入图片描述

调用Table Methods里的方法

this.$refs.table.toggleRowExpansion(row)

源码

<template>
	<div style="margin: 20px;" class="Box">
		<el-table ref="table"  stripe fit highlight-current-row :data="tableData" style="width:800px">
			<el-table-column label="ID" prop="id" align="center">
			</el-table-column>
			<el-table-column label="事件" prop="title" align="center">
			</el-table-column>
			<el-table-column label="思考" prop="thinking" align="center">
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.id==currentIndex">
                <el-button
                type="text"
                @click="toogleExpand(scope.row, '收起')"
              >收起</el-button>
					</span>
					<span v-else>
					  <el-button
                type="text"
                @click="toogleExpand(scope.row, '展开')"
              >展开</el-button>
					</span>
				</template>
			</el-table-column>
			<el-table-column type="expand" width="1">
				<template slot-scope="props">
					<el-table border :data="props.row.foodsList" style="width: 100%" max-height="250">
						<el-table-column prop="name" label="名称" align="center" />
						<el-table-column prop="price" label="价格" align="center"/>
						<el-table-column prop="number" label="数量" align="center" />
						<el-table-column prop="desc" label="味道" align="center" />
					</el-table>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				currentIndex: null,
				tableData: [{
						id: 1,
						title: '早饭',
						thinking: '思考思考思考',
						foodsList: [{
								name: '鸡蛋',
								price: 1.5,
								number: 1,
								desc: '尚可'
							},
							{
								name: '包子',
								price: 2.5,
								number: 1,
								desc: '尚可'
							}
						]
					},
					{
						id: 2,
						title: '午饭饭',
						thinking: '思考思考思考',
						foodsList: [{
							name: '面条',
							price: 15,
							number: 1,
							desc: '尚可'
						}]
					},
					{
						id: 3,
						title: '晚饭',
						thinking: '思考思考思考',
						foodsList: [{
							name: '水饺',
							price: 18,
							number: 1,
							desc: '尚可'
						}]
					}
				]
			};
		},
		methods: {
		 toogleExpand(row, text) {
				let $table = this.$refs.table;
        if (text == "展开") {
				this.tableData.map((item) => {
					if (row.id != item.id) {
						$table.toggleRowExpansion(item, false)
					}
				})
        this.currentIndex = row.id
          this.Text = "收起";
      } else {
         this.currentIndex = null;
        this.Text = "展开";
      }
				$table.toggleRowExpansion(row)
		
			}
		}
	}
</script>
<style scoped>
.Box  .el-table__expand-icon {
  display: none;
}
.Box  .el-table .row-expand-cover .cell .el-table__expand-icon {
  display: none;
}
</style>