el-table表格展开图标改为文字
时间: 2024-11-12 17:43:00 浏览: 105
在Element UI的el-table组件中,如果想将默认的展开行图标替换为文字,你可以通过自定义列模板来实现。具体步骤如下:
1. 首先,在`<el-table-column>`标签内设置`render`属性,它接受一个函数作为回调,用于动态渲染每个单元格。
```html
<template>
<el-table :data="tableData" :expand-row-keys="expandedKeys">
<el-table-column type="index" label="序号"></el-table-column>
<!-- 添加一个自定义列 -->
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
{{ scope.row.name }}
<!-- 这里添加展开按钮的文字,如 "详细信息" -->
<span v-if="scope.$index === currentExpandedRowIndex && scope.row.expanded" class="custom-expand">详细信息</span>
</template>
</el-table-column>
<!-- 其他列... -->
<!-- 添加展开行操作,例如点击某一行会显示或隐藏其子项 -->
<template slot-scope="scope">
<el-button @click="toggleExpand(scope.$index)" :class="{ active: scope.row.expanded }">
{{ scope.row.expanded ? '收起' : '展开' }}
</el-button>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: ...,
expandedKeys: [], // 初始化空数组存储展开的行
currentExpandedRowIndex: null, // 当前展开行的索引
};
},
methods: {
toggleExpand(index) {
if (this.currentExpandedRowIndex === index) {
this.currentExpandedRowIndex = null;
} else {
this.currentExpandedRowIndex = index;
}
// 根据当前行的状态调整expandedKeys
this.expandedKeys = [...this.expandedKeys.filter(key => key !== index), index];
}
},
};
</script>
```
在这个例子中,我们为每行添加了一个自定义的展开/收起按钮,并在条件满足时显示文本“详细信息”。当点击行号时,我们会切换 `currentExpandedRowIndex` 的值,并相应地管理 `expandedKeys` 来控制哪些行处于展开状态。
阅读全文
相关推荐


















