vue3 el-table表格封装动态数据，动态表头，动态格式

动态表头啥意思，就是表头的信息不固定，可以根据不同的界面显示不同的表头，或者点击某个按钮切换不同的表头 先来说格式

tableData:[["1","2","3"],["4","5","6"]] tableDataOption:["菜单一","彩蛋二","菜单三"]

<template>
  <div class="containear" :style="customStyles">
    <el-table ref="table" :data="tableDatas" :max-height="screenHeight" style="width: 100%" v-loading="loading"
      element-loading-text="数据正在查询中..." @selection-change="handleSelectionChange">
      <el-table-column v-if="IsShowXuhao" align="center" label="序号" type="index" width="55"></el-table-column>
      <el-table-column v-if="selectMultipleOptions" align="center" type="selection" width="55" />
      <el-table-column v-for="(item, index) in filteredTableDataOption" :key="index"
        :fixed="index == 0 ? 'left' : false" :label="item" :prop="'' + index" :width="WidthMores ? '100' : ''"
        align="center">
        <template #default="{ row }">
          <!-- 把括号里的内容去掉 -->
          <span v-if="row['' + index] == null">{{
            row["" + index] != null
              ? row["" + index].replace(/\(.*?\)/g, "")
              : row["" + index]
          }}
            <el-icon v-if="ZiDingYijY && index == 4 && row['' + index] < 0" color="#2e9a3c">
              <CaretBottom />
            </el-icon>
            <el-icon v-if="ZiDingYijY && index == 4 && row['' + index] > 0" color="red">
              <CaretTop />
            </el-icon>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="SbTzZhuanyong" v-hasPermi="['CutomAdd']">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="EditSbList(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script lang="ts" setup>
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.theme);
const dynamicBackgroundColor = ref("#01ada8");
const customStyles = computed(() => ({
  "--background-color":
    sideTheme == "" ? dynamicBackgroundColor.value : sideTheme.value,
  // 可以添加更多的 CSS 变量
}));
const emit = defineEmits(["SelectionChange", "EditSbList", "getXiangqingData"]);
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  tableDataOption: {
    type: Array,
    default: () => [],
  },
  selectMultipleOptions: {
    type: Boolean,
    default: false,
  },
//是否打开序号
  IsShowXuhao: {
    type: Boolean,
    default: false,
  },
//宽度是否自适应
  WidthMore: {
    type: Boolean,
    default: false,
  },
  ZiDingYijY: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: true,
  },
//是否开启操作
  SbTzZhuanyong: {
    type: Boolean,
    default: false,
  },
//表格高度
  tableHeight: {
    type: Number,
    default: undefined,
  },
});
const screenHeight = ref(props.tableHeight != undefined ? props.tableHeight : document.documentElement.clientHeight - 242);
 
onMounted(() => {
  window.onresize = () => {
 
    screenHeight.value = props.tableHeight != undefined ? props.tableHeight : document.documentElement.clientHeight - 242
  };
});
watch(() => props.tableHeight, (val) => {
  screenHeight.value=val
 
})
// 过滤表头
const filteredTableDataOption = computed(() => {
  if(props.tableDataOption!=null){
    return props.tableDataOption.filter((item) => item !== "resID");
  }else{
    return []
  }
});
// 过滤表格数据
const tableDatas = computed(() => {
  return props.tableData;
});
// 宽度
const WidthMores = computed(() => {
  return props.WidthMore;
});
 
const handleSelectionChange = function (val: any) {
  emit("SelectionChange", val);
};
const EditSbList = function (row) {
  emit("EditSbList", row);
};
</script>
<style scoped lang="scss">
//表格滚动条
// 设置滚动条的背景色和圆角
.containear {
 
  /* ---el-table滚动条公共样式--- */
  :deep(.el-scrollbar__bar .el-scrollbar__thumb) {
    transition: all 0.1s ease; // 添加过渡效果
  }
 
  // 横向滚动条
  :deep(.el-scrollbar__bar.is-horizontal .el-scrollbar__thumb) {
    opacity: 1; // 默认滚动条自带透明度
    height: 80px; // 横向滑块的宽度
    border-radius: 2px; // 圆角度数
    background-color: var(--background-color); // 滑块背景色
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
  }
 
  // 纵向滚动条
  :deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
    opacity: 1;
    width: 8px; // 纵向滑块的宽度
    border-radius: 2px;
    background-color: var(--background-color);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  }
}
</style>

用法直接引用传值