为您的Vue3+Element Plus 项目助力：自制可筛选、可排序、可分页的表格组件

从头构建具有筛选、排序和分页功能的Vue3+Element Plus表格组件

搭建基本表格

首先，使用Element Plus提供的<el-table>组件搭建基本表格。<el-table>组件提供了丰富的配置选项，可以轻松实现表格的列头、列宽、行高、边框等基本样式。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 30,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 40,
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

添加筛选功能

为了实现筛选功能，使用Element Plus提供的<el-select>组件作为筛选控件。<el-select>组件可以轻松实现单选或多选，并且提供了丰富的配置选项，可以满足不同的筛选需求。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名">
      <template slot-scope="scope">
        <el-select v-model="scope.row.name" placeholder="请选择姓名">
          <el-option
            v-for="item in nameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 30,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 40,
          address: '广州市天河区'
        }
      ],
      nameOptions: [
        {
          value: '张三',
          label: '张三'
        },
        {
          value: '李四',
          label: '李四'
        },
        {
          value: '王五',
          label: '王五'
        }
      ]
    }
  }
}
</script>

添加排序功能

为了实现排序功能，使用Element Plus提供的<el-table-column>组件的sortable属性。sortable属性可以轻松实现列头的排序功能，并且提供了丰富的配置选项，可以满足不同的排序需求。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
      sortable
    ></el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      sortable
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      sortable
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 30,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 40,
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

添加分页功能

为了实现分页功能，使用Element Plus提供的<el-pagination>组件。<el-pagination>组件可以轻松实现分页功能，并且提供了丰富的配置选项，可以满足不同的分页需求。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="tableData.length"
    @current-change="handleCurrentChange"
  />
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 30,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 40,
          address: '广州市天河区'
        }
      ],
      currentPage: 1,
      pageSize: 10
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

封装组件

为了提高组件的复用性，将上述代码封装成一个Vue组件，并提供了丰富的配置选项，以便用户可以根据自己的需求进行自定义。

import { defineComponent } from 'vue'
import { ElTable, ElTableColumn, ElSelect, ElPagination } from 'element-plus'

export default defineComponent({
  name: 'MyTable',
  components: {
    ElTable,
    ElTableColumn,
    ElSelect,
    ElPagination
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    }
  }
  // ...其他代码
})

常见问题解答

1. 如何在表格中添加多选功能？

可以使用<el-checkbox>组件实现多选功能，具体代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

2. 如何在表格中实现自定义渲染？

可以使用<template>插槽实现自定义渲染，具体代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名">
      <template slot-scope="scope">
        {{ scope.row.name }} - {{ scope.row.age }}
      </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

3. 如何在表格中实现行内编辑？

可以使用<el-table>组件的inline-edit属性实现行内编辑，具体代码如下：

<template>
  <el-table :data="tableData" style="width: 1