首页 新闻 会员 周边

element plus 对于另一个文件中的Table的columns进行formatter格式化,怎样返回带有背景色的列?

0
悬赏园豆:100 [已解决问题] 解决于 2024-04-19 08:54

element plus 对于另一个文件中的Table的columns进行formatter格式化,怎样返回带有背景色的列?

例如vue文件是Student.vue
然后里面使用了element plus的Table table指定了columns
columns在另一个文件 比如 data.ts

格式可能是
const columns = [
.....
{
label: "学生偏好",
prop: "studentLoving",
minWidth: 150,
formatter: (row: any, column: any, cellValue: any, index: number) => {
return <span style="background-color: blue;">${cellValue}</span>;
},

},

]

这个例子中,formatter返回应该是背景色有蓝色,但是却把<span等标签全都展示到视图了.

ukyo--君君小时候的主页 ukyo--君君小时候 | 初学一级 | 园豆:38
提问于:2024-04-17 17:11

v-html,试试

快乐的凡人721 2个月前

@快乐的凡人721: 不知道用在哪里

ukyo--BlackJesus 2个月前
< >
分享
最佳答案
1

formatter的返回类型是VNode | string
那可以试试

return h('span', {style: 'background-color: blue;'}, cellValue)
收获园豆:70
复制粘贴机器人 | 小虾三级 |园豆:702 | 2024-04-18 08:59

好我试下

ukyo--君君小时候 | 园豆:38 (初学一级) | 2024-04-19 08:38

这个完全可以!谢谢,而且不只是'span', ElTag这种elementplus的标签也可以!

ukyo--君君小时候 | 园豆:38 (初学一级) | 2024-04-19 08:53
其他回答(2)
0

在 Student.vue 文件中,您可以为 el-table 组件添加 cell-class-name 属性,并定义一个方法来根据单元格的数据动态返回对应的 CSS 类名。然后,在 CSS 文件中定义这些类以设置背景色。
在 Student.vue 中:<template>
<el-table :data="students" :cell-class-name="getCellClassName">
<!-- ... 其他列 ... -->
<el-table-column
label="学生偏好"
prop="studentLoving"
minWidth="150"
:cell-class-name="getCellClassName"
/>
</el-table>
</template>

<script>
import { defineComponent } from 'vue';
import { columns } from './data'; // 引入 columns 数据

export default defineComponent({
components: {},
data() {
return {
students: [], // 假设这是您的数据源
tableColumns: columns,
};
},
methods: {
getCellClassName({ row, column, rowIndex, columnIndex }) {
if (column.property === 'studentLoving') {
// 根据 cellValue 或其他条件判断返回对应的 CSS 类名
const cellValue = row.studentLoving;
if (cellValue === '某种特定值') {
return 'custom-background-blue'; // 示例:当学生偏好为特定值时,应用蓝色背景
}
}
return '';
},
},
});
</script>

<style scoped>
.custom-background-blue {
background-color: blue !important;
}
</style>
在 data.ts 中
// 不需要对 columns 进行更改,保持原有结构即可
const columns = [
// ...
{
label: "学生偏好",
prop: "studentLoving",
minWidth: 150,
// formatter: (row: any, column: any, cellValue: any, index: number) => {
// return <span style="background-color: blue;">${cellValue}</span>;
// }, // 移除或注释掉原有的 formatter
},
];

但乱红尘熊 | 园豆:773 (小虾三级) | 2024-04-17 17:19
0

在 Element Plus 中,如果你想要在 Table 的列中使用 formatter 来格式化数据,并且希望返回的内容中包含 HTML 标签(比如 <span>),你需要在 Table 组件中设置 use-html-string 属性为 true,以告知 Table 组件传入的内容是 HTML 字符串,而不是普通的文本。这样,Table 组件会将 HTML 字符串渲染为对应的 HTML 元素。

例如,在你的 Student.vue 文件中,你可以这样使用 Table 组件:

html
Copy code
<template>
<el-table :data="tableData" :columns="columns" use-html-string>
</el-table>
</template>

<script>
import { reactive } from 'vue';
import { columns } from './data'; // 导入列配置

export default {
setup() {
// 假设这是你的表格数据
const tableData = reactive([
{ name: '学生1', studentLoving: '喜欢' },
{ name: '学生2', studentLoving: '不喜欢' },
// 更多数据...
]);

return {
  tableData,
  columns,
};

},
};
</script>
然后在你的 data.ts 文件中,你可以定义你的列配置:

typescript
Copy code
export const columns = [
// 其他列配置...
{
label: '学生偏好',
prop: 'studentLoving',
minWidth: 150,
formatter: (row: any, column: any, cellValue: any, index: number) => {
// 返回带有背景色的 HTML 字符串
return <span style="background-color: blue;">${cellValue}</span>;
},
},
// 更多列配置...
];
这样,当你在 Table 的列配置中使用 formatter 时,它会将返回的 HTML 字符串渲染为相应的 HTML 元素,并且带有背景色的样式会生效。

收获园豆:30
Technologyforgood | 园豆:6538 (大侠五级) | 2024-04-17 20:34

很完整详细,但是好像用的也不是完全一样的东西,好想得从columns formatter入手.

支持(0) 反对(0) ukyo--君君小时候 | 园豆:38 (初学一级) | 2024-04-19 08:38
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册