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

<template>
  <el-table
    ref="table"
    v-el-table-infinite-scroll="load"
    :row-key="tableProps.rowKey"
    :row-style="rowStyle"
    :data="tableData"
    :height="tableProps.height"
    :max-height="tableProps.maxHeight"
    :stripe="tableProps.stripe"
    :border="tableProps.border"
    :highlight-current-row="tableProps.highlightCurrentRow"
    :header-cell-class-name="tableProps.headerCellClassName"
    :tooltip-effect="tableProps.tooltipEffect"
    :show-summary="tableProps.showSummary"
    :row-class-name="tableRowClassName"
    :cell-class-name="cellClassName"
    @row-click="rowClickHandler"
    @cell-click="cellClickHandler"
    @select="selectHandler"
  >
    <el-table-column v-if="selectionEnable" type="selection" width="35" />
    <el-table-column v-if="isStatus" width="55">
      <template #default="scope">
        <div class="tableStatus">
          <div
            v-if="tableData[scope.$index].nodeState === '运行'"
            class="status0"
          >
            <span class="icon"></span>
          </div>
          <div
            v-else-if="tableData[scope.$index].nodeState === '停止'"
            class="status1"
          >
            <span class="icon"></span>
          </div>
          <div v-else class="status2"><span class="icon"></span></div>
        </div>
      </template>
    </el-table-column>
    <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
    <el-table-column
      class="infinite-list-item"
      v-for="(items, index) in tableHeaderList"
      :key="index"
      :label="items.columnLabel"
      :prop="items.columnName"
      :width="items.width ? items.width : tableColumnProperty.width"
      :sortable="items.needSort ? items.needSort : tableColumnProperty.sortable"
      :show-overflow-tooltip="tableColumnProperty.showOverflowTooltip"
      :align="items.align ? items.align : tableColumnProperty.align"
      :header-align="
        items.headerAlign ? items.headerAlign : tableColumnProperty.headerAlign
      "
      :label-class-name="items.lableClass ? items.lableClass : ''"
      :class-name="items.columnClassName"
    >
      <template #default="scope">
        <!-- 枚举值则为 items.key+'-enum' -->
        <template v-if="isChild(scope.row[items.columnName])">
          <div
            class="child-list"
            v-for="(newItem, i) in childDatas(scope.row[items.columnName])"
            :key="i"
          >
            {{ newItem }}
          </div>
        </template>
        <template v-else>
          {{
            scope.row[items.columnName + "-enum"]
              ? scope.row[items.columnName + "-enum"]
              : scope.row[items.columnName]
          }}
        </template>
      </template>
    </el-table-column>
    <el-table-column
      v-if="tableBtnGroup.length"
      label="操作"
      :align="tableColumnProperty.align"
      :width="btnGroupWidth"
    >
      <template #default="scope">
        <el-button
          v-for="(btn, index) in tableBtnGroup"
          :key="index"
          size="small"
          :class="btn.className"
          @click="handleClick(scope.$index, scope.row, btn.param)"
        >
          {{
            btn.name === "停止" && scope.row.runState === "停止"
              ? "启动"
              : 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">
import { PropType, computed, watchEffect } from "vue";
import { ElTable } from "element-plus";
import { CommonTableColumn } from "~/common";

export interface TableButton {
  name: string;
  className: string;
  param: number;
}

const props = defineProps({
  // 表头参数数组
  tableHeader: {
    type: Array as PropType<CommonTableColumn[]>,
    default: [] as CommonTableColumn[],
  },
  // 表格参数
  tableProperty: {
    type: Object,
    default: {},
  },
  // 公共表头参数
  tableColumnProperty: {
    type: Object,
    default: {
      width: "",
      fixed: "",
      sortable: false,
      showOverflowTooltip: true,
      align: "center",
      headerAlign: "",
    },
  },
  // 操作栏按钮组
  tableBtnGroup: {
    type: Array as PropType<TableButton[]>,
    default: [] as TableButton[],
  },
  // 表格数据
  tableData: {
    type: Array as PropType<any[]>,
    default: [] as any[],
  },
  // 操作栏宽度
  btnGroupWidth: {
    type: String,
    default: "",
  },
  // 自定义表头
  isStatus: {
    type: Boolean,
    default: false,
  },
  selectionEnable: {
    type: Boolean,
    default: false,
  },
});

//表格参数
const tableProps = reactive({
  height: "100%",
  maxHeight: "100%",
  stripe: true,
  border: true,
  highlightCurrentRow: false,
  rowClassName: "rowClass",
  headerCellClassName: "headerCell",
  tooltipEffect: "light",
  showSummary: false,
  rowKey: "",
});
watchEffect(() => {
  Object.assign(tableProps, props.tableProperty);
});

const tableHeaderList = ref<CommonTableColumn[]>([]);
watchEffect(() => {
  tableHeaderList.value = props.tableHeader.filter((column) => column.needShow);
});

const isChild = computed(() => (item: any) => {
  const msg = typeof item === "string" ? item : `${item}`;
  return msg.includes("-");
});

const childDatas = computed(() => (item: any) => {
  const msg = typeof item === "string" ? item : `${item}`;
  return msg.split("#");
});

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

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

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

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

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

const rowClickHandler = (row, column, event) => {
  emit("rowClick", row, column, event);
};

const cellClickHandler = (row, column, cell, event) => {
  emit("cellClick", row, column, cell, event);
};

const selectHandler = (selection, row) => {
  emit("select", selection, row);
};

const table = ref<InstanceType<typeof ElTable> | null>(null);

defineExpose({
  cellClass,
  table,
});
</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;
}
:deep.el-table {
  .rowClass {
    height: 40px;
    font-size: 14px;
    color: #101116;
  }
  .el-table__header .el-table__cell {
    height: 40px;
    background: #ffffff;
    font-size: 14px;
    font-weight: bold;
    color: #101116;
  }
  .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;
  }
  .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;
  }
  .child-list {
    font-size: 14px;
    font-family: Helvetica;
    font-weight: 400;
    color: #101116;
  }
  .el-table__body .el-table__cell {
    &.el-table-column--selection > .cell {
      display: block;
      text-align: center;
    }
    &.cell-click {
      color: #2d67e3;
      cursor: pointer;
    }
  }
}
:deep.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f0f3f7;
}
.tableStatus {
  font-size: 14px;
  .icon {
    width: 14px;
    height: 14px;
    background: #2d67e3;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
  }
  .status0 {
    position: relative;
    top: 5px;
  }
  .status1 {
    position: relative;
    top: 5px;
    .icon {
      background-color: #afb4bf;
    }
  }
  .status2 {
    position: relative;
    top: 5px;
    .icon {
      background-color: #eb2f3b;
    }
  }
}
</style>