轻松掌握Element UI表格组件的封装技巧

2023-10-15 02:20:34

导入Element UI

import { ElTable, ElTableColumn, ElButton } from 'element-ui'

2. 定义组件

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElButton
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: 'John Doe',
          age: 30
        },
        {
          id: 2,
          name: 'Jane Smith',
          age: 25
        },
        {
          id: 3,
          name: 'Michael Jones',
          age: 35
        }
      ]
    }
  },
  template: `
    <div>
      <el-table :data="tableData">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="Name"></el-table-column>
        <el-table-column prop="age" label="Age"></el-table-column>
      </el-table>
    </div>
  `
}

3. 添加页面唯一性按钮

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="handleExport">导出</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    handleExport() {
      // 导出表格数据
    },
    handleDelete(row) {
      // 删除表格中的某一行
    }
  }
}
</script>

4. 添加分页功能

<template>
  <div>
    <el-table :data="tableData" :pagination="true">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <el-button type="primary" @click="handleExport">导出</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    handleExport() {
      // 导出表格数据
    },
    handleDelete(row) {
      // 删除表格中的某一行
    }
  }
}
</script>