怎么在el-table里给获取到的数据+文字
时间: 2024-02-01 13:13:20 浏览: 19
您可以使用 `scoped slot` 来自定义表格中的单元格,然后将获取到的数据和文字一起渲染。下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="名称">
<template slot-scope="{ row }">
<span>{{ row.name }}</span>
<span class="desc">{{ row.description }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" />
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '商品1', description: '这是商品1的描述', price: 100 },
{ name: '商品2', description: '这是商品2的描述', price: 200 },
{ name: '商品3', description: '这是商品3的描述', price: 300 },
],
};
},
};
</script>
<style>
.desc {
margin-left: 10px;
color: #999;
}
</style>
```
在上面的示例中,我们使用了 `scoped slot` 来自定义表格中的单元格,通过 `slot-scope="{ row }"` 将当前行的数据传递进来,然后使用 `{{ row.name }}` 和 `{{ row.description }}` 分别渲染名称和描述。最后使用 CSS 将描述样式设置为灰色。