The table field in element is written to death, how to pass it into the specified field flexibly.

The table field in

element is written dead, how to flexibly pass it into the specified field? For example, I know that the backend will return some key and valuations, and I want to replace the fields in label and Prop directly. I used v-for to facilitate prop bound fields and found that this didn"t work.

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label=""
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label=""
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      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 "
          }]
        }
      }
    }
  </script>
Mar.28,2021

if you borrow the words written asynchronously upstairs, you need to first judge whether data has a value:

<el-table-column v-for="(item,index) in data" :key='index' v-if="data.length>0" :prop="item.prop" :label="item.label" :width='item.width'></el-table-column>

if there is no slot to use vmurfort, it is recommended to use the render function if it is complicated.

data = [
    {prop:'data',label:'',width:'180'},
    {prop:'name',label:'',width:'180'},
    {prop:'address',label:''}
]

<el-table-column v-for="(item,index) in data" :key='index' :prop="item.prop" :label="item.label" :width='item.width'></el-table-column>

for<el-table-column v-for="(item,index) in list" :key='index' :prop="item.prop" :label="item.label"></el-table-column>
Menu