tenant-Platform/src/components/Table/index.vue

<template>
  <div class="table-container">
    <div class="table_box">
      <div class="table-title-btn">
        <slot name="table-title-btn"></slot>
      </div>
      <el-table
        ref="multipleTableRef"
        :header-cell-style="{ 'background-color': '#f2f2f2' }"
        :data="props.tableData"
        style="width: 100%"
        row-key="id"
        :tree-props="props.treeProps"
        @selection-change="selectChange"
        @select-all="selectAllChange"
      >
        <el-table-column
          type="selection"
          v-if="showSelect"
          :selectable="selectable"
          width="55"
        />

        <el-table-column
          v-if="showIndex"
          type="index"
          label="序号"
          width="55"
        />
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :sortable="column.sortable ? 'custom' : false"
          :width="column.width"
        >
          <template #header>
            <slot name="search" :slotData="column"></slot>
          </template>
          <template #default="scope">
            
          
              
              <component v-if="column.formatter" :is="column.formatter(scope.row, column, scope.row[column.prop], scope.$index)" class="routerlick" />
              <span v-else>{{ scope.row[column.prop] }}</span>
            
            
          </template>
        </el-table-column>
        <el-table-column label="操作" v-if="showOperation">
          <template #default="scope">
            <slot name="operation" :operationData="scope"></slot>
          </template>
          <!-- <template #default="scope">
						<div v-if="scope.row._edit">
							<el-button type="primary" @click="handleSave(scope)"> 保存 </el-button>
							<el-button @click="handleCancle(scope)"> 取消 </el-button>
						</div>
						<el-button v-else type="primary" @click="handleEdit(scope)"> 编辑 </el-button>
					</template> -->
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box" v-show="props.pageInfo.show">
      <el-pagination

        v-model:current-page="props.pageInfo.pageNum"
        v-model:page-size="props.pageInfo.pageSize"
        :page-sizes="props.pageInfo.sizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="props.pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, ref, onMounted, defineEmits } from "vue";
import type { TableInstance } from "element-plus";

interface TableRow {
  [key: string]: any;
}
interface TagTypes {
  [key: string]: string;
}
const emit = defineEmits(['getList', 'selectAllChange','selectChange']);
interface Props{
  tableData: Array<TableRow>;
  columns: {
    prop: string;
    label: string;
    sortable?: boolean;
    width?: string;
    style?: string;
    formatter?: (row: any, column: any, cellValue: any, index: number) => any;
  }[];
  pageInfo: {
    pageNum: number;
    pageSize: number;
    sizes: number[];
    total: number;
    show:boolean;
  };
  showSelect: boolean;
  showIndex: boolean;
  showOperation:boolean;
  treeProps:{}
}
const props = withDefaults(defineProps<Props>(),{
  showOperation:true,
})
const multipleTableRef = ref<TableInstance>();
const TableData = ref<TableRow[]>();
onMounted(() => {
  let counter = 1;
  TableData.value = props.tableData.map((row) => ({
    ...row,
    _edit: false, // 设置默认非编辑状态
    counter: counter++,
  }));
});
const selectable = () => true;
const Tagvalue = ref("");
const tagTypes: TagTypes = {
  公司: "primary",
  甲方: "success",
  合作伙伴: "primary",
};
const handleSizeChange = (val: number) => {
  props.pageInfo.pageSize = val;

  emit("getList", props.pageInfo);
};
const handleCurrentChange = (val: number) => {
  props.pageInfo.pageNum = val;
  emit("getList", props.pageInfo);
};
const getTagType = (tag: string) => {
  return tagTypes[tag] || tagTypes["公司"];
};
const handleEdit = (scope: { row: TableRow }) => {
  Tagvalue.value = scope.row.Tag || "";
  scope.row._edit = true;
};
const handleSave = (scope: { row: TableRow }) => {
  scope.row.Tag = Tagvalue.value;
  scope.row._edit = false;
};
const handleCancle = (scope: { row: TableRow }) => {
  scope.row._edit = false;
};
const headClass = (scope: { row: TableRow }) => {
  // return 'background:#F8F8F9'
};

//多选
const newSelectionList = ref<string[]>([]);
const selectAllChange = (value: any[]) => {
  if (value.length>0) {
    value.map(val => {
      newSelectionList.value.push(val.id)
    })
  } else {
    newSelectionList.value = [];
  }
  emit('selectAllChange', newSelectionList.value)

}
const selectChange = (value: any[]) => {
  if (value.length>0) {
    value.map(val => {
      newSelectionList.value.push(val.id)
    })
  } else {
    newSelectionList.value = [];
  }
  emit('selectChange', newSelectionList.value)
}
</script>
<style lang="scss" scoped>
.table-container {
  // width: 100%;
  // height: auto;
  margin: 5px;
  display: flex;
  flex-direction: column;
}
.table_box {
  flex: 1;
  margin-bottom: 10px;
  overflow-y: auto;
  .table_item_container {
    margin-left: 20px;
    padding: 0;
    .table_item {
      margin: 5px 0;
    }
  }
  :deep(.cell) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .table-title-btn {
    margin-bottom: 20px;
    :deep(.el-button) {
      margin-right: 20px;
    }
  }
}
.page_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>