sgxt_web/src/components/aboutTable/DarkTable.vue

<template>
  <div style="width: 100%;height:100%">
    <!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      :class="customClass"
      :cell-class-name="setClass"
      :row-class-name="rowClassName"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
      @row-click="singleElection"
      @row-dblclick="rowdbClickHland"
      :reserve-selection="true"
      @row-contextmenu="rowcontextmenuHland"
      @mouseover.native="clearnScroll"
      @mouseleave.native="createScroll"
      :row-key="getConfiger.rowKey"
      :border="getConfiger.border"
      :default-expand-all="getConfiger.defaultExpandAll"
      :stripe="getConfiger.stripe"
      :height="tableHeight"
      v-loading="tableConfiger.loading"
      :lazy="getConfiger.lazy"
      :load="load"
      v-el-table-infinite-scroll="loadTable"
      :tree-props="treePros"
      style="width: 100%; font-size: 16px"
      :header-cell-class-name="() => 'myTableHeadBgColorDark'"
      :highlight-current-row="getConfiger.showSelectType === 'radio'"
      :row-style="{
        height:
          getConfiger.rowHeight === 'auto'
            ? getConfiger.rowHeight
            : getConfiger.rowHeight + 'px'
      }"
    >
      <el-table-column
        type="selection"
        width="55"
        v-if="getConfiger.showSelectType === 'checkBox'"
        :reserve-selection="true"
      />
      <el-table-column
        width="55"
        v-else-if="getConfiger.showSelectType === 'radio'"
        #default="{ row }"
      >
        <el-radio
          class="radio"
          v-model="radioChoose"
          :label="row[getConfiger.rowKey]"
          >&nbsp;</el-radio
        >
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        v-if="getConfiger.showIndex"
        width="60"
        :align="getConfiger?.align"
      />
      <el-table-column
        v-for="(item, index) in tableColumn"
        :align="getConfiger?.align"
        :prop="item.prop"
        :key="index"
        :label="item.label"
        :width="item.width"
        :show-overflow-tooltip="item.showOverflowTooltip || false"
        :sortable="item.sortable || false"
      >
        <!-- 使用自定义表头 -->
        <template v-if="item.showSoltHeader" #header="column">
          <span class="header-icon">
            <slot :name="item.prop + 'head'" v-bind="column"></slot>
          </span>
        </template>

        <!-- 使用自定义 -->
        <template v-if="item.showSolt" #default="scope">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
        <!-- 默认 -->
        <template v-else #default="{ row }">
          {{ row[item.prop] }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        v-if="getConfiger.haveControls"
        :fixed="fixed"
        :label="getConfiger.controls"
        :width="controlsWidth"
        :align="getConfiger?.align"
      >
        <template #default="scope">
          <slot name="controls" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
import {
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
  watchEffect
} from "vue";
const props = defineProps({
  tableConfiger: {
    type: Object,
    default: () => {}
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tableColumn: {
    type: Array,
    default: () => {
      return [];
    }
  },
  controlsWidth: {
    type: Number,
    default: 180
  },
  tableHeight: {
    type: Number
  },
  isScroll: {
    type: Number,
    default: false
  },
  customClass: {
    type: String
  },
  setClass: {
    type: String
  },
  setRowClass: {
    type: Boolean
  },
  treePros: {
    type: Object,
    default: {
      children: "children",
      hasChildren: "hasChildren"
    }
  },
  fixed: {
    type: String,
    default: "right"
  }
});
// 可选的时候选择的数据
const emit = defineEmits([
  "chooseData",
  "rowdbClickHland",
  "rowcontextmenuHland"
]);
const multipleTableRef = ref();
const currentRow = ref();
let getConfiger = reactive({
  showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
  showIndex: true, // 是否显示索引
  rowKey: "id", // 如果是树形表格必须设置rowKey
  border: true, // 是否显示边框
  defaultExpandAll: false, // 是否展开全部
  loading: false,
  align: "center", // 列的对齐方式 left / center / right
  haveControls: true, // 是否有操作列
  controls: "操作", // 操作列的表头
  stripe: false, // 是否有斑马线
  lazy: true, // 树形表格的懒加载必须在tableDatez中给有children的项设置  hasChildren: true,才会显示展开icon
  portUrl: "", // 当树形表格使用懒加载的时候传入的请求路径/接口用于懒加载数据
  defaultSelectKeys: [], // 默认选中的key集合
  radioChoose: "", // 单选时选中的值------------------------------------------- 待完成
  rowHeight: "41", // 每行的高度
  //用作指定行自定义行样式
  rowClassProp: "", //行匹配字段名称
  rowClassLinght: "" //行匹配数据
});
const radioChoose = ref("");

watchEffect(() => {
  getConfiger = { ...getConfiger, ...props.tableConfiger };
  setDefaultChoose();
});

onMounted(() => {
  setDefaultChoose();
  createScroll(); //是否滚动
});
const rowClassName = ({ row, rowIndex }) => {
  if (props.setRowClass) {
    return row.setRowClass || "";
  } else {
    if (row[getConfiger.rowClassProp] == getConfiger.rowClassLinght) {
      return "table_light_row";
    }
    if (rowIndex % 2 == 0) {
      return "";
    } else {
      return "table_blue_row";
    }
  }
};
// 可选的时候选择的数据
const handleSelectionChange = (val) => {
  emit("chooseData", val);
};
// 单选的时候选择的数据
const handleCurrentChange = (val) => {
  currentRow.value = val;
  emit("chooseData", val);
};
const singleElection = (val) => {
  if (getConfiger.showSelectType === "radio") {
    radioChoose.value = val[getConfiger.rowKey];
    emit("chooseData", val);
  }
};
// 懒加载数据的方法
const load = (date, treeNode, resolve) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles"
      },
      {
        id: 32,
        date: "2016-05-01",
        name: "wangxiaohu",
        address: "No. 189, Grove St, Los Angeles"
      }
    ]);
  }, 1000);
};
// 设置默认选中（在调用的父页面要确保 tableData传出来了如果延迟传过来默认选中不会生效）
function setDefaultChoose() {
  nextTick(() => {
    // 多选的默认选中
    if (
      getConfiger.defaultSelectKeys?.length > 0 &&
      getConfiger.showSelectType === "checkBox"
    ) {
      props.tableData.forEach((item) => {
        if (
          getConfiger.defaultSelectKeys.findIndex(
            (v) => v === item[getConfiger.rowKey]
          ) > -1
        ) {
          if (multipleTableRef.value)
            multipleTableRef.value.toggleRowSelection(item, true);
        }
      });
      // 单选的默认选中
    } else if (
      getConfiger.defaultSelectKeys &&
      getConfiger.defaultSelectKeys?.length > 0 &&
      getConfiger.showSelectType === "radio"
    ) {
      radioChoose.value = getConfiger.defaultSelectKeys[0];
    }
  });
}
//当某一行被双击时会触发该事件
const rowdbClickHland = (row) => {
  emit("rowdbClickHland", row);
};
//当某一行右键点击时会触发该事件
const rowcontextmenuHland = (row, column, e) => {
  e.preventDefault();
  emit("rowcontextmenuHland", { row, e });
};

const timer = ref(null);
// 鼠标进入
const clearnScroll = () => {
  clearInterval(timer.value);
  timer.value = null;
};
// 鼠标离开
const createScroll = () => {
  clearnScroll();
  // 拿到table
  const tabel = multipleTableRef.value.layout.table.refs;
  // 拿到可以滚动的元素
  const tableWrapper = tabel.bodyWrapper.firstElementChild.firstElementChild;
  if (props.isScroll) {
    timer.value = setInterval(() => {
      tableWrapper.scrollTop += 1;
      //判断滚动到底部,设置为0(可视高度+距离顶部 = 整个高度)
      if (
        tableWrapper.clientHeight + tableWrapper.scrollTop ==
        tableWrapper.scrollHeight
      ) {
        tableWrapper.scrollTop = 0;
      }
    }, 100);
  }
};

// 触底加载
const loadTable = () => {
  emit("changePage");
};

onUnmounted(() => {
  clearnScroll();
});
</script>

<style lang = "scss">
.myTableHeadBgColorDark {
  background-color: rgba(18, 97, 192, 0.3) !important;
  color: #008efc;
}
</style>
<style lang = "scss" scoped>
::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {
  font-size: 14px;
}
::v-deep .el-table {
  background-color: transparent;
  --el-table-border-color: transparent;
  --el-table-row-hover-bg-color: #008ffd4b;
}

::v-deep .el-table th.el-table__cell {
  color: #1f84ff;
  border-bottom: none;
}
::v-deep .el-table tr {
  background-color: transparent;

  color: #fff;
}
::v-deep .el-table td.el-table__cell {
  background: transparent;
}
::v-deep .el-table .table_blue_row {
  background: #072343;
}
::v-deep .el-table .table_light_row {
  background: #6b933d;
}
::v-deep .el-table .cell {
  padding: 0;
  line-height: unset;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background: #002961;
}
::v-deep .el-table__body-wrapper tr td.el-table-fixed-column--right {
  background: #fff !important;
}
::v-deep .el-loading-mask {
  background: rgba(0, 0, 0, 0.3);
}
.header-icon {
  white-space: nowrap;
}
</style>