El-table-column prop 在一个数组中有几个值

如何解决El-table-column prop 在一个数组中有几个值

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

这里也是表列的代码：

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

解决方法

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

var Main = {
    data() {
      return {
        tableData: [{
          name: 'Tom',settings: [{
            value: 'first'
          },{
            value: 'second'
          }]
        },{
          name: 'John',{
            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',{
            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>