<template>
<el-table :data="tableData" style="width: 100%" ref="table">
<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 label="开关">
<template #default="{row}">
<el-switch
@change="changeSwitch($event,row)"
v-model="row.value"
:active-value="1"
:inactive-value="2"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</template>
</el-table-column>
<el-table-column type="expand" width="1">
<template #default="{row}"> {{row.address}} </template>
</el-table-column>
</el-table>
</template>
<script>
data() {
return {
tableData: [],
},
created() {
this.getData();
},
methods:{
// row 就是一行数据 操控展开和收起
changeSwitch(is, row) {
this.$refs.table.toggleRowExpansion(row);
},
// 模拟请求数据 数据回显
getData() {
setTimeout(() => {
this.tableData = [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
value: 1,
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
value: 2,
},
];
this.$nextTick(() => {
// 判断如果没勾选则开启则展开下拉框
for (let x of this.tableData) {
if (x.value == 2) {
this.$refs.table.toggleRowExpansion(x);
}
}
});
}, 1000);
},
}
}
</script>
下面是我手搓得折叠行table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
#main {
width: 100%;
margin-top: 20px;
background-color: #fff;
border-radius: 10px;
height: 489px;
overflow: auto;
}
table {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
margin: 0;
border-collapse: collapse;
border-spacing: 0;
border-radius: 10px;
}
/*控制cellspacing*/
table td {
padding: 10px;
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.main_header > tr {
height: 52px;
background-color: #f2f2f2;
color: #333333;
font-size: 16px;
}
</style>
</head>
<body>
<div id="app">
<div id="main">
<table>
<thead class="main_header">
<tr>
<td>姓名</td>
<td>办理是否通过</td>
</tr>
</thead>
<tbody v-for="(item,i) in userList" :key="item.id">
<tr>
<td>{{item.user_nickname}}</td>
<td>
<el-switch
v-model="item.result"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeResult($event,i)"
:active-value="1"
:inactive-value="2"
>
</el-switch>
</td>
</tr>
<tr v-if="item.result == 2">
<td colspan="6" style="text-align: left">
<div style="display: flex; align-items: center">
<div
style="
white-space: nowrap;
margin-bottom: 5px;
margin-right: 10px;
"
>
失败原因:
</div>
<el-input
style="width: 100%"
size="small"
v-model="item.desc"
placeholder="请输入内容"
></el-input>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data() {
return {
userList: [
{
result: 1,
user_nickname: "大会",
desc: "",
},
{
result: 2,
user_nickname: "大湾区",
desc: "dasd",
},
],
};
},
});
</script>
</body>
</html>