数组中具有多个值的 El-table-column 属性

Question

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

这也是table-column的代码：

<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>