<!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" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<link rel="stylesheet" href="./sty.less" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div class="app">
<template>
<el-table border ref="myTable" :data="tableData" style="width: 100%">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column label="商品 ID" prop="id"> </el-table-column>
<el-table-column label="商品名称" prop="name"> </el-table-column>
<el-table-column label="描述" prop="desc"> </el-table-column>
<el-table-column label="描述" prop="desc" align="center">
<template slot-scope="scope">
<span>{{scope.row.expend===false?'展开':'折叠'}}</span>
<div
@click="expendRow(scope.$index,scope.row)"
style="cursor: pointer;display:inline-block;"
class="up"
v-if="!scope.row.expend"
></div>
<div
@click="expendRow(scope.$index,scope.row)"
style="cursor: pointer;display:inline-block;"
class="down"
v-if="scope.row.expend"
></div>
</template>
</el-table-column>
<el-table-column width="1" type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label="商品名称">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label="所属店铺">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label="商品 ID">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label="店铺 ID">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label="商品分类">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label="店铺地址">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label="商品描述">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
</el-table>
</template>
</div>
</body>
<style>
v-deep .el-table__expand-icon {
display: none !important;
}
.up{
width: 0;
height: 0;
border-width: 10px 10px 0;
border-style: solid;
border-color: blue transparent transparent transparent;
}
.down{
width: 0;
height: 0;
border-width: 0px 10px 10px;
border-style: solid;
border-color: transparent transparent blue transparent ;
}
</style>
<script>
var app = new Vue({
el: ".app",
data() {
return {
tableData: [
{
id: "1",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶,奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333",
expend: false,
},
{
id: "12987123",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶,奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333",
expend: false,
},
{
id: "12987125",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶,奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333",
expend: false,
},
{
id: "12987126",
name: "好滋好味鸡蛋仔",
category: "江浙小吃、小吃零食",
desc: "荷兰优质淡奶,奶香浓而不腻",
address: "上海市普陀区真北路",
shop: "王小虎夫妻店",
shopId: "10333",
expend: false,
},
],
};
},
methods: {
expendRow(idx, row) {
row.expend = !row.expend;
console.log(row);
//toggleRowExpansion
//用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,
//则是设置这一行展开与否(expanded 为 true 则展开)
this.$refs.myTable.toggleRowExpansion(row, row.expend);
},
},
});
</script>
</html>
el-table中表格展开和折叠
最新推荐文章于 2024-06-07 10:54:39 发布