ant-degin-vue的table表格有一列需要拿着接口的一个值判断加两个不同的单位
时间: 2024-03-01 21:54:41 浏览: 71
可以在 ant-design-vue 的 table 表格中使用 customRender 方法,根据接口返回的值来渲染该列的内容。代码示例如下:
```html
<a-table :columns="columns" :data-source="data">
<template #unitColumn="{ text }">
<span>
{{ text }}<span v-if="text > 10">kg</span><span v-else>g</span>
</span>
</template>
</a-table>
```
```js
export default {
data() {
return {
columns: [
// 其他列
{
title: '单位列',
dataIndex: 'unit',
customRender: (text) => {
return {
text: text,
attrs: {
id: 'unitColumn'
}
};
}
}
],
data: [
// 表格数据
]
};
}
}
```
在上述代码中,`customRender` 方法会返回一个对象,其中 `text` 属性为该列的值,`attrs` 属性中的 `id` 为该列的唯一标识。通过在模板中使用 `#unitColumn`,将该列的渲染方法指定为 `unitColumn`。在渲染时,根据 `text` 的值来判断应该使用哪种单位。如果 `text` 大于 10,则使用 kg,否则使用 g。
阅读全文