SZYGM1.0/src/components/tableTemp/index.vue

import { default } from '../../../../CABaggageData2.0/src/components/BackButton/index.vue';
<template>
  <el-table
    v-el-table-infinite-scroll="load"
    :row-key="props.tableProperty.rowKey ? props.tableProperty.rowKey : tablePropertyDefault.rowKey"
    :row-style="rowStyle"
    :data="props.tableData"
    :height=" props.tableProperty.height ? props.tableProperty.height : tablePropertyDefault.height"
    :max-height=" props.tableProperty.maxHeight ? props.tableProperty.maxHeight : tablePropertyDefault.maxHeight"
    :stripe="props.tableProperty.stripe ? props.tableProperty.stripe : tablePropertyDefault.stripe"
    :border="props.tableProperty.border ? props.tableProperty.border : tablePropertyDefault.border"
    :highlight-current-row="props.tableProperty.highlightCurrentRow ? props.tableProperty.highlightCurrentRow : tablePropertyDefault.highlightCurrentRow"
    :header-cell-class-name=" props.tableProperty.headerRowClassName ? props.tableProperty.headerRowClassName : tablePropertyDefault.headerRowClassName"
    :tooltip-effect="props.tableProperty.tooltipEffect ? props.tableProperty.tooltipEffect : tablePropertyDefault.tooltipEffect"
    :show-summary="props.tableProperty.showSummary ? props.tableProperty.showSummary : tablePropertyDefault.showSummary"
    :row-class-name="tableRowClassName"
    :cell-class-name="cellClassName"
  >
    <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
    <el-table-column
      class="infinite-list-item"
      v-for="(items, index) in props.tableHeader"
      :key="index"
      :label="items.label"
      :prop="items.key"
      :width="props.tableColumnProperty.width"
      :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
      :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
      :align="items.align ? items.align : props.tableColumnProperty.align"
      :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign"
      :label-class-name="items.lableClass ? items.lableClass : ''"
    >
      <template #default="scope">
        <!-- 枚举值则为 items.key+'-enum' -->
        {{ scope.row[items.key+'-enum'] ? scope.row[items.key+'-enum']:scope.row[items.key]}}
      </template>
    </el-table-column>
    <el-table-column
      v-if="props.tableBtnGroup.length"
      label="操作"
      :align="props.tableColumnProperty.align"
      :width="BtnGroupWidth"
    >
      <template #default="scope">
        <el-button
          v-for="(btn, index) in props.tableBtnGroup"
          :key="index"
          size="small"
          @click="handleClick(scope.$index, scope.row, btn.param)"
          :class="btn.className"
          >{{ btn.name }}</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
  </ul> -->
</template>

<script setup lang="ts">
//表格参数
const tablePropertyDefault = {
  height: "100%",
  maxHeight: "100%",
  stripe: true,
  border: true,
  highlightCurrentRow: false,
  rowClassName: "rowClass",
  headerRowClassName: "headerRowClass",
  tooltipEffect: "light",
  showSummary: false,
  rowKey: "",
};
const props = defineProps({
  //表头参数数组
  tableHeader: {
    type: Array,
    default: [],
  },
  //表格参数
  tableProperty: {
    type: Object,
    default: {
      height: "100%",
      maxHeight: "100%",
      stripe: true,
      border: true,
      highlightCurrentRow: false,
      rowClassName: "rowClass",
      headerRowClassName: "headerRowClass",
      tooltipEffect: "light",
      showSummary: false,
      rowKey: "",
    },
  },
  //公共表头参数
  tableColumnProperty: {
    type: Object,
    default: {
      width: "",
      fixed: "",
      sortable: false,
      showOverflowTooltip: false,
      align: "center",
      headerAlign: "",
    },
  },
  //操作栏按钮组
  tableBtnGroup: {
    type: Array,
    default: [
      // {
      // name:"编辑",     //按钮名称
      // className:"editBtn",  //按钮class样式  可以在父组件中定义好此class样式
      // param:2    //按钮类型参数
      // }
    ],
  },
  //表格数据
  tableData: {
    type: Array,
    default: [],
  },
  //操作栏宽度
  BtnGroupWidth:{
    type:String,
    default:""
  }
});

//向父组件传参 btnClick：点击按钮后    load  触发下拉加载   cellClass 修改某一行class的触发条件
const emit = defineEmits(["btnClick", "load","cellClass"]);

//按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
const handleClick = (index: number, row: Object, param: number) => {
  emit("btnClick", index, row, param);
};

//行公共样式
const rowStyle = (row: Object, rowIndex: number) => {
  let styleJson: Object = {
    height: "50px",
    fontSize: "14px",
    color: "#101116",
  };
  return styleJson;
};

//表格行class样式 可通过父组件直接传class名称修改当前行样式
const tableRowClassName = (row: Object, rowIndex: number) => {
  if (row.row.rowClass) {
    return row.row.rowClass;
  }
  return "";
};

//给某一格加class
const cellClass=ref("")
const cellClassName = (row: Object) => {
  emit("cellClass",row)
  return cellClass.value;
};
//滚动分页加载
const load = () => {
  emit("load", true);
};

defineExpose({
  cellClass
})

</script>

<style scoped lang="scss">
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
::v-deep.el-table .rowClass {
  height: 40px;
  font-size: 14px;
  color: #101116;
}
::v-deep.el-table .headerRowClass {
  height: 40px;
  background: #ffffff;
  font-size: 14px;
  font-weight: bold;
  color: #101116;
}
::v-deep.el-table .editBtn {
  background: #ffffff;
  border: 1px solid #f79ec6;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ac014d;
}

::v-deep.el-table .delBtn {
  background: #eb2f3b;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  border: none;
}
</style>