新人菜鸟一个,看完各位大佬的方法之后,差不多都是用width="1",我用的没效果, 如下
<el-table
:data="tableData"
style="width: 100%" ref="refTable" @row-click="clickRowHandle">
<el-table-column type="expand" width="1">
<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-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>
然后用最笨的方法解决了。
首先还是要加上width="1", 然后F12找到ico的class,然后在样式中直接设为:
.el-table__expand-icon {
display: none;
}
属实有点笨了……
然后需求里面,展开当前行收起其他行,这个就是一个类似手风琴的效果,如下:
clickRowHandle(row, column, event) {
let $refTable = this.$refs['refTable']
this.listData.map(item => {
if (row.metadata.uid != item.metadata.uid) {
$refTable.toggleRowExpansion(item, false)
}
})
$refTable.toggleRowExpansion(row)
}
方法中的判断条件就是数据中的唯一字段,各位大佬根据实际情况进行修改。
(写的不好,还望各位大佬勿喷)