element-ui 动态设置table列

html:

    <el-table :data="tableData2" style="width: 100%">
      <el-table-column
        v-for="(v, i) in columns"
        :key="i"
        :prop="v.prop"
        :label="v.label"
        :width="v.width">
      </el-table-column>
      <el-table-column>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

js:

columns: [{
        index: 2,
        prop: 'date',
        label: '日期',
        width: '120'
      }, {
        index: 1,
        prop: 'name',
        label: '姓名',
        width: '120'
      }, {
        index: 6,
        prop: 'address',
        label: '地址'
      }],
      tableData2: [{
        date: '2016-05-02',
        name: '王小虎',
        sex: '男',
        address: '上海市普陀区金沙江路 1518 弄',
        number: 10
      }, {
        date: '2016-05-04',
        name: '王小虎',
        sex: '男',
        address: '上海市普陀区金沙江路 1518 弄',
        number: 15
      }, {
        date: '2016-05-01',
        name: '王小虎',
        sex: '男',
        address: '上海市普陀区金沙江路 1518 弄',
        number: 23
      }, {
        date: '2016-05-03',
        name: '王小虎',
        sex: '男',
        address: '上海市普陀区金沙江路 1518 弄',
        number: 19
      }],

页面显示：