elementUI--表格

1.页面显示

<template>
  <el-table :data="tableData" border style="width: 100%">
        <el-table-column 
              v-for="(item,index) in colum"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align">
        </el-table-column>
        <el-table-column
              fixed="right"
              label="操作"
              width="200"
              align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
       </el-table-column>
  </el-table>
</template>

2.数据

methods: {
   handleClick(row) {
     console.log(row);
  }
},
data() {
   return {
      colum:[
          {prop:"date",label:"日期",width:"200",align:"center"},
          {prop:"name",label:"姓名",width:"220",align:"center"},
          {prop:"province",label:"省份",width:"320",align:"center"},
          {prop:"city",label:"市区",width:"120",align:"center"},
          {prop:"address",label:"地址",width:"400",align:"center"}
      ],
      tableData: []
    }
  }
}

3.接口

getTable() {
    sbx({ }).then((res) => {
        this.tableData = res.result
        for (let i = 0; i < this.tableData.length; i++) {
           let item = this.tableData[i]
           item.zjxs=item.zjxssj==null?"-":item.zjxssj          
        }
    }).catch((err) => {
       console.log(err);
    });
}