el-table 自定义表头

yiBen_

已于 2024-07-24 13:58:43 修改

阅读量580

点赞数 7

文章标签： vue.js 前端 elementui

于 2024-07-24 10:31:42 首次发布

本文链接：https://blog.csdn.net/Sawiue/article/details/140638570

版权

el-table 自定义表头

在这里插入图片描述

利用复选框进行自定义表头设置

//示例 
    <el-checkbox
      v-model="stcheckAll"
      :indeterminate="stisIndeterminate"
      @change="sthandleCheckAllChange"
    >
      全选
    </el-checkbox>
    <el-checkbox-group v-model="selectedColumns" @change="handleColumnsChange">
      <el-checkbox
        v-for="column in columns"
        :key="column.field"
        :label="column.field"
        :disabled="column.disabled"
      >
        {{ column.fieldName }}
      </el-checkbox>
    </el-checkbox-group>
    <el-table :border="true" :data="tableData" :style="{ width: '100%' }">
      <el-table-column
        v-for="column in elTableitem"
        :key="column.field"
        :prop="column.field"
        :label="column.fieldName"
        :width="column.width"
        :fixed="column.fixed"
        show-overflow-tooltip
        align="center"
      />
    </el-table>

// 示例
const stcheckAll = ref(false);
const stisIndeterminate = ref(true);
const tableData = ref([
  {
    name: "宋江",
    age: 18,
    code: 23434564575867,
    stature: 2000,
    color: "red",
  },
  {
    name: "李逵",
    age: 18,
    code: 23434564575867,
    stature: 2000,
    color: "red",
  },
  {
    name: "林冲",
    age: 18,
    code: 23434564575867,
    stature: 2000,
    color: "red",
  },
  {
    name: "武大郎",
    age: 18,
    code: 23434564575867,
    stature: 2000,
    color: "red",
  },
]);
//初始选中所有列
const selectedColumns = ref(["name", "age"]);
const columns = ref([
  {
    field: "name",
    fieldName: "姓名",
    disabled: true,
  },
  {
    field: "age",
    fieldName: "年龄",
    disabled: true,
  },
  {
    field: "code",
    fieldName: "身份证号",
    width: "180",
    fixed: true,
    disabled: false,
  },
  {
    field: "stature",
    fieldName: "身高",
    disabled: false,
  },
  {
    field: "color",
    fieldName: "肤色",
    disabled: false,
  },
]);
//循环表格列表
const elTableitem = computed(() => {
  return columns.value.filter((column) =>
    selectedColumns.value.includes(column.field)
  );
});
// 全选/反选
const sthandleCheckAllChange = (val) => {
  selectedColumns.value = val
    ? columns.value.map((column) => column.field)
    : //默认禁用选中表头
      ["idCard", "name"];
  stisIndeterminate.value = false;
};
// 处理列选择变化
const handleColumnsChange = (value) => {
  const checkedCount = value.length;
  stcheckAll.value = checkedCount === columns.value.length;
  stisIndeterminate.value =
    checkedCount > 0 && checkedCount < columns.value.length;
};