如何对el-table-column 标签再处理
时间: 2023-08-14 12:05:26 浏览: 117
您可以通过以下三种方式对 `el-table-column` 标签进行再处理:
1. 使用 `scoped-slot`:在 `el-table-column` 标签中添加 `scoped-slot` 属性,可以自定义表格的表头或单元格内容。例如:
```html
<el-table-column prop="name" label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
<el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
</template>
</el-table-column>
```
2. 使用 `formatter`:在 `el-table-column` 标签中添加 `formatter` 属性,可以自定义单元格内容的显示格式。例如:
```html
<el-table-column prop="date" label="日期" :formatter="formatDate"></el-table-column>
```
```javascript
methods: {
formatDate(row, column, cellValue) {
return moment(cellValue).format('YYYY-MM-DD');
}
}
```
3. 使用 `render`:在 `el-table-column` 标签中添加 `render` 属性,可以自定义单元格内容的渲染方式。例如:
```html
<el-table-column prop="status" label="状态" :render="renderStatus"></el-table-column>
```
```javascript
methods: {
renderStatus(h, { row }) {
const status = row.status;
if (status === 'success') {
return h('span', { style: { color: 'green' } }, '成功');
} else if (status === 'fail') {
return h('span', { style: { color: 'red' } }, '失败');
} else {
return h('span', { style: { color: 'gray' } }, '未知');
}
}
}
```
以上三种方式都可以对 `el-table-column` 标签进行再处理,具体选择哪种方式取决于您的需求和实际情况。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)