vue3 + elementUI 自定义表单校验规则与表头排序和筛选

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      :filters="[{ text: '2016-01', value: '2016-01' }, { text: '2016-05', value: '2016-05' }]"
      :filter-method="filterHandler"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      :filters="[{ text: '张三', value: '张三' }, { text: '李四', value: '李四' }]"
      :filter-method="filterHandler"
      filter-placement="bottom-end">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </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 弄'
        }]
      }
    },
    methods: {
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      formatter(row, column) {
        return row[column.property] == '上海市普陀区金沙江路' ? '金沙江路' : row[column.property];
      }
    }
  }
</script>

这个例子展示了如何在Vue 3和Element UI中使用表格组件的排序、筛选和自定义列表项渲染。el-table-column组件的sortable属性启用了列的排序功能，filters属性定义了筛选器数组，filter-method属性指定了自定义的筛选方法。formatter方法用于自定义单元格的内容显示。