el-table,一个el-table-column里,显示两个后台字段,且分别各它们指定label
时间: 2023-11-07 20:33:21 浏览: 74
在一个el-table-column中显示两个后台字段可以通过使用作用域插槽来实现。您可以在el-table-column的slot-scope中访问当前行的数据,然后将需要显示的两个字段拼接起来并显示出来。例如:
```html
<el-table :data="tableData">
<el-table-column label="姓名&年龄">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
<span>{{ scope.row.age }}</span>
</template>
</el-table-column>
</el-table>
```
在这个例子中,我们创建了一个名为“姓名&年龄”的el-table-column,并在其中使用了作用域插槽。在插槽中,我们访问了当前行的数据(通过scope.row),并将其name和age字段拼接起来分别显示出来。由于这个el-table-column只有一个单元格,因此它的表头名称就是“姓名&年龄”。
相关问题
el-table,一个el-table-column里,分为两行显示两个后台字段,且分别给它们两个指定label
可以在`el-table-column`中使用`scoped-slot`来自定义列的内容。你可以使用`<template>`元素来定义这个`scoped-slot`,并在其中使用`<span>`元素来分行显示两个后台字段,并在`<span>`元素中使用`{{}}`来显示后台字段的内容。代码示例如下:
```
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="分数">
<template slot-scope="scope">
<span>{{ scope.row.score1 }}</span>
<br>
<span>{{ scope.row.score2 }}</span>
</template>
</el-table-column>
</el-table>
```
在上述示例中,我们在第二个列中使用了两个`<span>`元素来分行显示`score1`和`score2`两个后台字段,并使用了`<br>`元素来换行。同时,我们使用了`scope.row.name`、`scope.row.score1`和`scope.row.score2`来显示对应行的数据。
eel-table,el-table-column里,显示两个后台字段,且分别各它们指定label
您可以在el-table-column中使用prop属性指定后台字段名,使用label属性指定该列的表头名称。例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
其中,prop属性指定了后台返回的数据中对应的字段名,label属性则指定了该列的表头名称。在这个例子中,表格将会显示名为“姓名”和“年龄”的两列,并分别显示后台返回的"name"和"age"字段。
阅读全文