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.headerRowClassName"
    :tooltip-effect="tableProps.tooltipEffect"
    :show-summary="tableProps.showSummary"
    :row-class-name="tableRowClassName"
    :cell-class-name="cellClassName"
    @row-click="rowClickHandler"
    @cell-click="cellClickHandler"
  >
    <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"
          @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">
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,
  },
})

//表格参数
const tableProps = reactive({
  height: '100%',
  maxHeight: '100%',
  stripe: true,
  border: true,
  highlightCurrentRow: false,
  rowClassName: 'rowClass',
  headerRowClassName: 'headerRowClass',
  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',
])

//按钮点击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 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;
  }
  .headerRowClass {
    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.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>