elementui中的table怎样实现列头通过参数配置,而不是在文件中写死?

elementui中的table怎样实现列头通过参数配置,而不是在文件中写死

想实现动态列,求高手赐教

回答:

类头也用v-for来搞,数据从data来即可。

啥也多不说了,上代码:

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column 
        v-for="col in cols"
        :prop="col.prop" :label="col.label" >
      </el-table-column>
    </el-table>
    
    <el-button raw-type="button" @click="addCol">
      添加一列
    </el-button>
  </template>
</div>
var Main = {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
          cols: [
              {prop: 'date', label: '日期'},
            {prop: 'name', label: '姓名'},
          ]
        }
      },
      methods: {
          addCol(){
            this.cols.push({prop: 'address', label: '地址'})
        }
      }
    }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

http://jsfiddle.net/6ar2jons/

回答:

贴出代码来看看啊

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注