unknown
2023-10-23 5672f352d0ba114e2ae96c8cefad6c74ae6d2934
web/src/components/element/Table.vue
@@ -1,8 +1,8 @@
<template>
  <div>
  <div class="box">
    <!-- elTable -->
    <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="rowClick"
      @row-dblclick="rowDblClick" @selection-change="handleSelectionChange" border stripe>
    <el-table v-loading="tableLoading" :data="tableData" :ref="tableRef" :size="tableSize" @row-click="handleRowClick"
      @row-dblclick="handleRowDblClick" @selection-change="handleSelectionChange" border stripe>
      <template v-for="(col, index) in tableColumns">
        <!-- 选择框 -->
        <el-table-column v-if="col.selection" :key="`selection${index}`" width="50" type="selection" align="center">
@@ -17,8 +17,9 @@
        <el-table-column v-else-if="col.operation" :key="`operation${col.name}`" :width="col.width" :label="col.name"
          align="center">
          <template #default="{ row }">
            <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''" :icon="subCol.icon || ''"
              v-permission="subCol.permission || ''" @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn">
            <el-button v-for="subCol in col.value" :key="subCol.name" :class="subCol.class || ''"
              :icon="subCol.icon || ''" v-permission="subCol.permission || ''"
              @click="subCol.handleRow ? subCol.handleRow(row) : emptyFn">
              {{ subCol.name }}
            </el-button>
          </template>
@@ -45,8 +46,8 @@
      </template>
    </el-table>
    <!-- 分页组件 -->
    <cPagination :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize" @change-page-num="changePageNum"
      @change-page-size="changePageSize" />
    <cPagination v-if="pageTotal" :total="pageTotal" :page-num.sync="pageNum" :page-size.sync="pageSize"
      @change-page-num="changePageNum" @change-page-size="changePageSize" />
  </div>
</template>
<script>
@@ -106,46 +107,45 @@
    handleSelection: {
      type: Function,
      default: () => { }
    }
    },
    rowClick: {
      type: Function,
      default: () => { }
    },
  },
  components: {
    cPagination
  },
  methods: {
    changePageNum(val) {
      // console.log(val)
      // this.pageNum = val
      this.$emit("update:pageNum", val);
      this.pageChange();
      this.$emit("update:pageNum", val)
      this.pageChange()
    },
    changePageSize(val) {
      this.$emit("update:pageSize", val);
      this.$emit("update:pageSize", val)
      if (val * (this.pageNum - 1) <= this.pageTotal) {
        this.pageChange();
        this.pageChange()
      }
    },
    // 单击
    rowClick() {
      // this.time && clearTimeout(this.time);
      // this.time = setTimeout(() => {
      //   this.$refs[this.tableRef].toggleRowSelection(row);
      // }, 200);
    handleRowClick(row) {
      this.rowClick(row)
    },
    // 双击
    rowDblClick() {
      // this.time && clearTimeout(this.time);
    },
    clearSelection() {
      this.$refs[this.tableRef].clearSelection();
    },
    handleRowDblClick() { },
    handleSelectionChange(val) {
      this.handleSelection(val);
      this.handleSelection(val)
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
}
.el-table {
  border: none;
  height: 100%;
}
</style>