526互联

table append 插槽

发布时间 2023-04-17 22:33:12作者: 沐阳歡
<template>
  <el-table height='300' :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <template v-if='isFlag' #append>
      <div style='width: 100%;display: flex;justify-content:center;align-items: center;'>没有更多数据</div>
    </template>
  </el-table>
  <el-button @click='add'>添加</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const isFlag = ref(false)
const num  = 3
let tempN = 0
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
function add() {
  //这里正常来说应该走的是接口
  if(tempN<num){
    tableData.value.push(
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      }
    )
    tempN++
  }else {
    isFlag.value = true
  }
}
</script>