Element el-table的formatter和scope template不能同时存在问题解决办法
时间: 2024-01-26 16:04:43 浏览: 77
bootstrap-table formatter 使用vue组件的方法
如果你想同时使用Element UI的`<el-table>`组件的`formatter`和`scope`属性,可以使用`<template>`标签来代替`formatter`属性。在`<template>`标签中,你可以使用`scope.row`来获取当前行的数据对象,然后根据需要进行格式化处理。
例如,假设你想要在`<el-table>`组件中显示一个日期列,你可以使用如下的代码:
```html
<el-table :data="tableData">
<el-table-column prop="date">
<template slot-scope="scope">
{{ new Date(scope.row.date).toLocaleDateString() }}
</template>
</el-table-column>
</el-table>
```
在上面的代码中,我们使用`<template>`标签来代替`formatter`属性,并且使用`slot-scope`属性来获取当前行的数据对象。然后使用JavaScript的`Date`对象来将日期格式化为本地日期字符串,最终将格式化后的字符串输出到表格中。
需要注意的是,如果你使用了`<template>`标签来代替`formatter`属性,那么你需要使用`slot-scope`属性来获取当前行的数据对象,而不是使用`formatter`属性中的`row`参数。
阅读全文