一、前言:
查看elementUI的官网有展开例子,但是官网的例子是点击表格前的箭头来控制展开收起的。如下图:
二、为了满足我们想要的效果,直接上代码:
html代码:
<template>
<div>
<div class="tableBox">
<el-table
:data="tableData"
style="width: 100%"
ref="expandTable"
row-key="id"
:expand-row-keys="expands"
:header-cell-style="{ background: '#EFF3F5', color: '#6B7275' }"
>
<el-table-column type="expand" width="1">
<template #default="props">
<div>展开内容:{{ props.row.expandMsg }}</div>
</template>
</el-table-column>
<el-table-column label="名称" prop="name"> </el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button
link
size="small"
class="btnClass"
@click="handleRowClick(scope.row)"
>{{ scope.row.id == expands[0] ? "收起" : "展开" }}</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
注:1、row-key=”id“的id需要是数据的唯一标识符
js代码:
import { ref } from "vue";
const tableData = ref([{ id: 1, name: "aaa", expandMsg: "我是展开内容" },{ id: 2, name: "bbb", expandMsg: "我是展开内容bbb" }]);
//实现展开收起
const expands = ref([]);
const handleRowClick = (row) => {
console.log(row);
if (expands.value.includes(row.id)) {
expands.value = expands.value.filter((val) => val !== row.id);
} else {
expands.value = []; //添加该代码实现手风琴模式,删除该代码取消手风琴模式
expands.value.push(row.id);
}
};
注:1、tableData是表格数据,里面需要有id(可根据不用项目换,保证是唯一值就行),然后需要与 row-key的值保持一致
2、handleRowClick 函数内操作的id也是需要和 row-key的值保持一致
完整代码:
<template>
<div>
<div class="tableBox">
<el-table
:data="tableData"
style="width: 100%"
ref="expandTable"
row-key="id"
:expand-row-keys="expands"
:header-cell-style="{ background: '#EFF3F5', color: '#6B7275' }"
>
<el-table-column type="expand" width="1">
<template #default="props">
<div>展开内容:{{ props.row.expandMsg }}</div>
</template>
</el-table-column>
<el-table-column label="名称" prop="name"> </el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button
link
size="small"
class="btnClass"
@click="handleRowClick(scope.row)"
>{{ scope.row.id == expands[0] ? "收起" : "展开" }}</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "",
};
</script>
<script setup>
import { ref } from "vue";
const tableData = ref([{ id: 1, name: "aaa", expandMsg: "我是展开内容" },{ id: 2, name: "bbb", expandMsg: "我是展开内容bbb" }]);
//实现展开收起
const expands = ref([]);
const handleRowClick = (row) => {
console.log(row);
if (expands.value.includes(row.id)) {
expands.value = expands.value.filter((val) => val !== row.id);
} else {
expands.value = []; //添加该代码实现手风琴模式,删除该代码取消手风琴模式
expands.value.push(row.id);
}
};
</script>
<style lang="scss" scoped>
:deep(.el-table__expand-icon) {
display: none;
}
.tableBox {
background-color: #ffffff;
padding: 30px;
}
</style>
注:因为我们已经有展开和关闭按钮了,所以需要隐藏elementui自带的箭头
:deep(.el-table__expand-icon) {
display: none;
}
原文地址:https://blog.csdn.net/wzy_PROTEIN/article/details/133309979
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_21276.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。