el-table中的el-table-column数组是否有一个属性

时间:2018-08-27 11:01:49

标签: element-ui

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

在elementUI表中,有data属性绑定数据数组,但我想对el-table-column数组进行类似的操作。

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

1 个答案:

答案 0 :(得分:0)

我为此做了一个密码笔。希望这对以后的人有所帮助。

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迭代和呈现自定义内容。