sgxt_web/src/components/aboutTable/MyTable.vue

<template>
  <div style="width: 100%" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''">
    <!-- hasChildren要在tableData中定义表示当前行有没有下一级 children要在tableData中定义表示下一级的数据-->
    <el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange"
      :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" :tree-props="treePros" style="width: 100%" :header-cell-class-name="() => 'HeadBgColor'"
      :highlight-current-row="getConfiger.showSelectType === 'radio'"
      :row-style="{ height: getConfiger.rowHeight === 'auto' ? getConfiger.rowHeight : getConfiger.rowHeight + 'px' }">

      <el-table-column style="width: 55px" type="selection" width="55" v-if="getConfiger.showSelectType" :class="getConfiger.showSelectType === 'radio' ? 'tabBoxRadio' : ''" />

      <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" style="width: 100%; font-size: 14px"
        :show-overflow-tooltip="item.showOverflowTooltip || false" :sortable="item.sortable || false">
        <!-- 使用自定义 -->
        <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 { nextTick, onMounted, 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 || String
  },
  treePros: {
    type: Object,
    default: {
      children: "children",
      hasChildren: "hasChildren"
    }
  },
  fixed: {
    type: String,
    default: "right"
  }
});
// 可选的时候选择的数据
const emit = defineEmits(["chooseData"]);
const multipleTableRef = ref();
const currentRow = ref();
let getConfiger = reactive({
  showSelectType: null, // 显示多选还是单选还是没有选择 checkBox/radio/null
  showIndex: true, // 是否显示索引
  rowKey: null, // 如果是树形表格必须设置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" // 每行的高度
});
watchEffect(() => {
  getConfiger = { ...getConfiger, ...props.tableConfiger };
  setDefaultChoose();
});
onMounted(() => {
  setDefaultChoose();
});
// 可选的时候选择的数据
const handleSelectionChange = (val) => {
  if (getConfiger.showSelectType === 'radio' && val.length > 1) {
    let del_row = val.shift();
    multipleTableRef.value.toggleRowSelection(del_row, false);
    currentRow.value = val;
    emit("chooseData", val);
  } else {
    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 (props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "checkBox") {
      props.tableData.forEach((item) => {
        if (props.tableConfiger.defaultSelectKeys.findIndex((v) => v === item[props.tableConfiger.rowKey]) > -1) {
          multipleTableRef.value.toggleRowSelection(item, true);
        }
      });
      // 单选的默认选中
    } else if (props.tableConfiger.defaultSelectKeys && props.tableConfiger.defaultSelectKeys?.length > 0 && props.tableConfiger.showSelectType === "radio") {
      getConfiger.radioChoose = props.tableConfiger.defaultSelectKeys[0];
    }
  });
}
</script>

<style lang="scss"></style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}

.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>