使用ElementPlus的虚拟化表格&自定义表头

一.后端

1.创建一个实体用来返回虚拟化表格所需要的表头参数

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ColumnObj {
    private String key;
    private String dataKey;
    private String title;
    private Integer width;
}

2.自定义一个注解，实现自定义返回的表头名和默认宽度

@Target(ElementType.FIELD)
@Retention(RetentionPolicy.RUNTIME)
@Inherited
public @interface ColumnTitle {
    String name();

    int width() default 150;
}

3.通过反射的形式获取需要创建的实体的属性名，并且把所有属性名添加到返回的表头集合中

        List<ColumnObj> columnList = new ArrayList<>();
        Class<User> clazz = User.class;
        Field[] fields = clazz.getDeclaredFields();
        for (java.lang.reflect.Field field : fields) {
            var titleAnn = field.getAnnotation(ColumnTitle.class);
            String columnTitle = "";
            if (titleAnn == null || StringUtils.isEmpty(titleAnn.name()))
                columnTitle = field.getName();
            else
                columnTitle = titleAnn.name();
            columnList.add(new ColumnObj(field.getName(), field.getName(), columnTitle, 150));
        }

4.自定义一个返回的VO，把表格的表头数据和和实际数据返回给前端

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultObj {
    private List<ColumnObj> columnList;
    private String dataJson;
}

return R.ok(new ResultObj(columnList, JSON.toJSONString(list)));

二.前端

1.template

      <el-col :span="8">
        <!-- 表格数据 -->
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <span>{{ opTitle }}</span>
            </div>
          </template>
          <el-auto-resizer>
            <template #default="{ height, width }">
              <el-table-v2 :columns="columns" :data="dataList" :width="width" :height="252" fixed/>
            </template>
          </el-auto-resizer>
        </el-card>
      </el-col>

2.script

import {
  getTableData,
} from "@/api/..."
const opTitle = ref('');
const dataList = ref([]);
const columns = ref([]);

function getData(row) {
  columns.value = []
  dataList.value = []
  proxy.$modal.loading("查询中,请稍等...")
  getTableData(row.id).then(res => {
    columns.value = res.data.columnList
    dataList.value = JSON.parse(res.data.dataJson)
  }).finally(() => {
        proxy.$modal.closeLoading()
      }
  )
}

2.api

export function getTableData(id) {
    return request({
      url: '',
      method: 'get',
      params: {
        id: id
    }
    })
  }

三.总结

        1.按照上诉步骤就可以完成虚拟化表格自定义的表头显示数据了，我这里是后端传了JSON数据返回给前端，所有前端需要把JSON数据进行格式化，大家也可以后端直接前一个List集合给前端，这样还少了一个转换的步骤。

        2.默认是把实体的所有属性都返回给前端作为表头，如果有不需要的属性，大家也可以在后端过滤一遍后再返回给前端。