smart-search-web/src/components/cus/CusTable.vue

<template>
  <div class="cus-table">
    <div class="cus-table-table">
      <el-table
        ref="ref_table"
        v-bind="$attrs"
        :data="data"
        :row-key="rowKey"
        @sort-change="handleSort"
        @filter-change="handleFilter"
        @selection-change="v => $emit('update:selected', v)"
        max-height="100%"
      >
        <el-table-column v-if="selected" type="selection" :width="selectWidth" align="center" :selectable="selectable"/>
        <el-table-column v-if="singled" :width="singledWidth" align="center" class-name="single-column" fixed="left">
          <template #default="scope">
            <div class="single-circle" :class="{active: scope.row[singledKey] === singled[singledKey]}" @click.stop="$emit('update:singled', scope.row)">
              <div class="single-circle-in"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="showIndex" type="index" label="序号" align="center" fixed="left" width="60"/>
        <!--        一级-->
        <template v-for="(one, oneI) in tableHead" :key="oneI">
          <template v-if="one.children?.length > 0">
            <el-table-column :label="one.label" align="center">
              <!--              二级-->
              <template v-for="(two, twoI) in one.children" :key="twoI">
                <template v-if="two.children?.length > 0">
                  <el-table-column :label="two.label" align="center">
                    <!--                    三级-->
                    <template v-for="(three, threeI) in two.children" :key="threeI">
                      <template v-if="three.children?.length > 0">
                        <el-table-column :label="three.label" align="center">
                          <!--                          四级-->
                          <template v-for="(four, fourI) in three.children" :key="fourI">
                            <template v-if="four.children?.length > 0">
                              <el-table-column :label="four.label" align="center">
                                <!--                                五级-->
                                <template v-for="(five, fiveI) in four.children" :key="fiveI">
                                  <CusTableColumn :item="five">
                                    <template #[`${five.value}-column`]="{column}">
                                      <slot :name="`${five.value}-column`" :column="column">
                                      </slot>
                                    </template>
                                    <template #[`${five.value}-column-value`]="{scope}">
                                      <slot :name="`${five.value}-column-value`" :scope="scope">
                                      </slot>
                                    </template>
                                    <template #[`${five.value}-header-value`]="{scope}">
                                      <slot :name="`${five.value}-header-value`" :scope="scope">
                                      </slot>
                                    </template>
                                  </CusTableColumn>
                                </template>
                              </el-table-column>
                            </template>
                            <template v-else>
                              <CusTableColumn :item="four">
                                <template #[`${four.value}-column`]="{column}">
                                  <slot :name="`${four.value}-column`" :column="column">
                                  </slot>
                                </template>
                                <template #[`${four.value}-column-value`]="{scope}">
                                  <slot :name="`${four.value}-column-value`" :scope="scope">
                                  </slot>
                                </template>
                                <template #[`${four.value}-header-value`]="{scope}">
                                  <slot :name="`${four.value}-header-value`" :scope="scope">
                                  </slot>
                                </template>
                              </CusTableColumn>
                            </template>
                          </template>
                        </el-table-column>
                      </template>
                      <template v-else>
                        <CusTableColumn :item="three">
                          <template #[`${three.value}-column`]="{column}">
                            <slot :name="`${three.value}-column`" :column="column">
                            </slot>
                          </template>
                          <template #[`${three.value}-column-value`]="{scope}">
                            <slot :name="`${three.value}-column-value`" :scope="scope">
                            </slot>
                          </template>
                          <template #[`${three.value}-header-value`]="{scope}">
                            <slot :name="`${three.value}-header-value`" :scope="scope">
                            </slot>
                          </template>
                        </CusTableColumn>
                      </template>
                    </template>
                  </el-table-column>
                </template>
                <template v-else>
                  <CusTableColumn :item="two">
                    <template #[`${two.value}-column`]="{column}">
                      <slot :name="`${two.value}-column`" :column="column">
                      </slot>
                    </template>
                    <template #[`${two.value}-column-value`]="{scope}">
                      <slot :name="`${two.value}-column-value`" :scope="scope">
                      </slot>
                    </template>
                    <template #[`${two.value}-header-value`]="{scope}">
                      <slot :name="`${two.value}-header-value`" :scope="scope">
                      </slot>
                    </template>
                  </CusTableColumn>
                </template>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <CusTableColumn :item="one">
              <template #[`${one.value}-column`]="{column}">
                <slot :name="`${one.value}-column`" :column="column">
                </slot>
              </template>
              <template #[`${one.value}-column-value`]="{scope}">
                <slot :name="`${one.value}-column-value`" :scope="scope">
                </slot>
              </template>
              <template #[`${one.value}-header-value`]="{scope}">
                <slot :name="`${one.value}-header-value`" :scope="scope">
                </slot>
              </template>
            </CusTableColumn>
          </template>
        </template>
      </el-table>
    </div>
    <div class="cus-table-page" v-if="!noPage">
      <CusPage
        :page-num="pageNum"
        :page-size="pageSize"
        :total="total"
        @page="onPage"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CusTable',
});
import {computed, getCurrentInstance, reactive, ref, watch} from "vue";

const emit = defineEmits(['handleSort', 'handleFilter', 'handlePage', 'update:selected'])
const {proxy} = getCurrentInstance()
const props = defineProps({
  pageNum: {},
  pageSize: {},
  total: {},
  rowKey: {default: 'id'},
  data: {},
  selected: {default: null},
  selectWidth: {default: 50},
  singledWidth: {default: 50},
  singled: {default: null},
  singledKey: {default: 'id'},
  showIndex: {default: true},
  selectable: {},
  tableHead: {default: []},
  noPage: {default: false}
})
const state: any = reactive({})
const ref_table = ref()
const handleSort = ({ column, prop, order }: any) => {
  emit('handleSort', {
    key: prop,
    value: order
  })
}
const handleFilter = (val: any) => {
  const key = Object.keys(val)[0]
  const head = props.tableHead.filter(v => v.value === key)[0]
  let value = null
  if (val[key].length > 0) {
    if (head.filterMultiple) {
      value = val[key]
    } else {
      value = val[key][0]
    }
  }
  emit('handleFilter', {key, value})
}
const onPage = (pageNum, pageSize) => {
  emit('handlePage', pageNum, pageSize)
}
watch(() => props.selected, (n: any) => {
  if (n.length === 0) {
    ref_table.value.clearSelection()
  } else {
    setTimeout(() => {
      n.forEach(v => {
        ref_table.value.toggleRowSelection(v, true)
      })
    }, 100)
  }
})
</script>

<style lang="scss" scoped>
.cus-table {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .cus-table-table {
    flex: 1;
    overflow: hidden;
    :deep(.el-table) {
      height: 100%;
      .el-table__header-wrapper, .el-table__fixed-right, .el-table__fixed {
        .el-table__header {
          border-bottom: 2px solid var(--cus-main-color);
          tr {
            >th {
              background-color: var(--cus-main-color-hex-2);
              height: 44px;
              padding: 0;
              .cell {
                font-weight: bold;
                font-size: 16px;
                color: var(--cus-text-color-1);
              }
            }
          }
        }
      }
      .el-table__body-wrapper {
        .el-scrollbar__wrap {
          max-height: 100% !important;
          .el-table__body {
            .el-table__row {
              >td {
                .cell {
                  font-size: 14px;
                  color: var(--cus-text-color-1);
                  .el-link+.el-link, .cus-table-button+.cus-table-button {
                    margin-left: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .cus-table-page {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>