Vue table及作用域插槽

浅浅的花香味﹌ 2022-12-23 06:43 238阅读 0赞

示例代码：

<template>
      <div>
        <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="地址" show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
    
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val,key) in tableLable" :label="val" :key="key" :prop="key" width="180"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" v-if="isShowOp">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    
    <script> export default { data () { return { isShowOp: true, 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 弄' }], tableLable: { date: '日期', name: '姓名', address: '地址' } } }, methods: { handleClick (index, row) { console.log(index + ' ' + row.name) } } } </script>