<el-table
ref="refTable"
@row-click="rowClick"
@expand-change="expandChange"
:data="list"
:show-header="false"
:cell-style="rowstyle"
style="width: 100%">
<el-table-column
prop="content"
width="600">
<template slot-scope="scope">
<el-badge is-dot class="item" v-if="scope.row.isRead == 1"></el-badge>
<span>{{scope.row.title}}</span>
</template>
</el-table-column>
<el-table-column
prop="accountName">
</el-table-column>
<el-table-column
width="200"
prop="createTime">
</el-table-column>
<el-table-column type="expand">
<template slot-scope="props">
<span v-html="props.row.content"></span>
</template>
</el-table-column>
</el-table>
//关键是table的@row-click方法,亲测可用
methods:{
rowClick(row,index,e) {
this.$refs.refTable.toggleRowExpansion(row)
},
}
Element UI 表格点击整行展开行显示
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- ElementUI table自带的有一个highlight-current-row的属性,但是只能单选。所以要实...
- element默认的table仅支持点击左侧的箭头展开折叠当前项,如图所示:50980a41a9ba53b35b4...
- element默认的table仅支持点击左侧的箭头展开折叠当前项,如图所示:image 而实际的需求是要点击其中一...
- html部分: js部分: css部分: 其中,row-expand-cover是上面我们自己设置的class。