element Table 展开行功能 (设置点击行可展开功能)

发布时间:2024-11-14 22:18

冰雪为融 已于 2022-06-01 22:26:56 修改

于 2020-01-03 10:33:41 首次发布

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

element Table 展开行功能 官方使用:

通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

但这种设置,只是点击箭头可展开 ,点击整行是不能展开的

但想要提升用户体验,最好的是点击行可展开,所以,本人研究了一下,做法也很简单。主要借助:

row-key="id"

:expand-row-keys="expands"

@row-click="clickRowHandle"

上面属性和事件缺一不可哦!

示例如下:

<el-table

:data="questionData"

row-key="id"

:expand-row-keys="expands"

stripe

class="system-table"

height="calc(100% - 170px)"

@row-click="clickRowHandle"

>

<el-table-column type="expand">

<template slot-scope="scope">

<div style="padding-left: 60px;">

<div v-if="scope.row.titleAnswersList.length && scope.row.titleType !== '04'">

<h2 style="font-size: 14px;">题目选项</h2>

<div

v-for="item in scope.row.titleAnswersList"

:key="item.id" >

<p>{{ item.answersCode }}:{{ item.answersContent }}</p>

</div>

</div>

<div>

<h2 style="font-size: 14px;">备注</h2>

<div>{{ scope.row.description || '暂无备注' }}</div>

</div>

</div>

</template>

</el-table-column>

/* 此处省略n行代码 */

</el-table>

js核心代码如下:(无关代码都已删除)

data() {

return {

getRowKeys(row) {

return row.id;

},

expands: [],

},

methods: {

clickRowHandle(row, column, event) {

if (this.expands.includes(row.id)) {

this.expands = this.expands.filter(val => val !== row.id);

} else {

this.expands.push(row.id);

}

},

}

然后就可以实现点击行展开,如下所示

网址:element Table 展开行功能 (设置点击行可展开功能) https://www.yuejiaxmz.com/news/view/76080

相关内容

干货--生活类app开发方案和功能展示
如何开启iPhone地震预警功能
软件开发功能清单如何写
智能家居生活场景及功能展示
美颜功能强大的软件 自带美颜功能
我校成功开展2024年秋季学期心理委员培训
心灵互动,关爱成长——我校开展2023级新生参观心理功能室活动
盘龙区开展“扫黑除恶 治理乱象 全面出击 百日行动”第四次检查
美颜功能强大的软件 自带美颜功能( 二 )
本地生活APP开发本地生活APP功能

随便看看