element组件--基础表格

参考: https://element.eleme.cn/#/zh-CN/component/table 

 <template>
    <el-table
      :data="tableData"
      style=" 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>

加一个操作列且里面带跳转标签

<el-table-column label="访问链接" width="400" show-overflow-tooltip>

<template>

<a :href="aa">编辑</a> <a :href="aa">删除</a>

</template>

</el-table-column>

 

加一个获取当前列的值的方法

<el-table-column

prop="id"

label="操作"

>

<template slot-scope="scope">

<a href="JavaScript:;" @click="infoList_detial(scope.row.id)">编辑</a>

</template >

</el-table-column>

注意: scope.row.id 是获取接口的数据的每个对象 ，所以没在页面上展示的列 也可以拿到的

参考 https://www.cnblogs.com/fengpingfan/p/9811141.html