element-ui - el-table 中的 el-table-column 数组是否有属性

Question

在此处查看 ElementUI 表的文档：http://element.eleme.io/#/en-US/component/table没有证据表明该数组/列集合的属性。

在 elementUI 表中有 data 属性来绑定数据数组，但我想对 el-table-column 数组做类似的事情。

我想要的是能够以类似于 bootstrap-vue 的方式添加列，方法是能够将单独的列配置数组绑定到表。

Answer 1

我为此做了一个codepen。希望这对将来的某人有所帮助。

https://codepen.io/anon/pen/YgdKzm

由于默认情况下该功能不可用，因此我们必须编写一些自定义代码。基本上你假设第一行总是包含标题。

const tableData = [
            ['Date', 'Name', 'Address'],
            ['2016-05-03', 'Tom', 'No. 189, Grove St, Los Angeles1'], 
            ['2016-05-02', 'James', 'No. 189, Grove St, Los Angeles2'],
            ['2016-05-03', 'Alice', 'No. 189, Grove St, Los Angeles3'], 
            ['2016-05-02', 'John', 'No. 189, Grove St, Los Angeles4']
          ]

<el-table
      border
      :data="tableData.slice(1)">
      <!--Assuming the first row always contains the table header-->
      <el-table-column
        v-for="(column, index) in tableData[0]"
        :key="index
        :label="column">
        <template slot-scope="scope">
          {{ scope.row[index] }}
        </template>
      </el-table-column>
    </el-table>

slice 函数将在不修改原始数组的情况下返回一个新数组，我们可以使用 slot-scope 迭代和呈现自定义内容。