<el-table ref="expandstable" :data="channelList" :expand-row-keys="expands" :row-key="getRowKeys">
<el-table-column type="expand">
<template slot-scope="props">
<el-row>
<el-col :span="12">
<p><span class="text-f94d7d">报警上限值:</span>{{ props.row.abnomalValueMax }}</p>
</el-col>
<el-col :span="12">
<p><span class="text-f94d7d"> 报警下限值:</span>{{ props.row.abnomalValueMin }}</p>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="序号" type="index" width="50" />
<el-table-column label="通道名称" align="center" prop="name" />
<el-table-column label="操作" align="center" prop="unit" width="200">
<template slot-scope="scope">
<el-button
size="medium"
type="text"
class="fs-16"
@click="expandsHandle(scope.row)"
>更多<i class="el-icon-arrow-down el-icon--right fs-20"></i></el-button>
</template>
</el-table-column>
</el-table>
export default{
name:'channelTemplate',
data(){
return{
//设置row-key只展示一行
expands: [],//只展开一行放入当前行id
getRowKeys: (row) => {//获取当前行id
// console.log(row)
return row.id //这里看这一行中需要根据哪个属性值是id
}
}
},
methods:{
/*点击更多展开table*/
expandsHandle(row){
this.$refs.expandstable.toggleRowExpansion(row)
},
}
}
element table 展开行 通过自定义按钮
最新推荐文章于 2024-07-30 08:28:18 发布