vue.js - 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/

这篇关于vue.js - elementui中的table怎样实现列头通过参数配置，而不是在文件中写死？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！