数组中具有多个值的El表列道具

Question

我想在表列上显示(我使用的是Element UI(，这是一个在特定数组中有多个值的道具。在我的例子中，设置中的数组有两个最大值，一个主标签和一个辅助标签。我想获取标签的特定值并将其显示为数组(value1，value2(。如果我使用属性prop="settings.0.label"或prop="settings.1.label"，我可以获取它，但我需要同时显示这两个属性。这是阵列结构的图像。阵列

这也是表列的代码：

<el-table-column prop="settings" label="Status" sortable
:sort-orders="['ascending', 'descending']" />
<el-table-column>

Answer 1

您可以使用自定义模板在单元格中定义自己的内容。

var Main = {
data() {
return {
tableData: [{
name: 'Tom',
settings: [{
value: 'first'
}, {
value: 'second'
}]
}, {
name: 'John',
settings: [{
value: 'first'
}, {
value: 'second'
}]
}]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<div id="app">
<template>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column label="Status">
<template slot-scope="scope">
{{ scope.row.settings[0].value }} - {{ scope.row.settings[1].value }}
</template>
</el-table-column>
</el-table>
</template>
</div>

或者你可以定义自己的格式化程序：

var Main = {
methods: {
formatter(row, column) {
return `${row.settings[0].value} - ${row.settings[1].value}`
}
},
data() {
return {
tableData: [{
name: 'Tom',
settings: [{
value: 'first'
}, {
value: 'second'
}]
}, {
name: 'John',
settings: [{
value: 'first'
}, {
value: 'second'
}]
}]
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
<div id="app">
<template>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name" width="180"></el-table-column>
<el-table-column prop="settings" label="Status" :formatter="formatter"></el-table-column>
</el-table>
</template>
</div>