vue3后台管理系统封装的普通表格组件_vue3 表格组件

1.普通的表格组件效果

ComtableListR.vue组件

<template>
  <div class="tableBox">
    <div class="btn-add">
      <a-space>
        <a-upload v-model:file-list="fileList" v-if="hasImport" name="file" accept=".xls,.xlsx"
          action="" :headers="headers" @change="handleChange">
          <a-button type="primary"> 导入 </a-button>
        </a-upload>
        <a-button type="primary" v-if="hasExport" @click="handleAllExport">导出全部</a-button>
        <a-button type="primary" v-if="allDel">全部删除</a-button>
        <a-button :disabled="dataSource.length === 0 || flagselectedRowKeys" v-if="rowSelection"
          @click="delEvent(selecrowdata, 'many')">批量删除</a-button>
        <a-button :disabled="dataSource.length === 0 || flagselectedRowKeys" v-if="markread"
          @click="handleFlagRead(selecrowdata, 'hasread')">标记已读</a-button>
        <a-button type="primary" v-if="operatingButton?.addbtn" @click="editEvent('add')">{{addbtnName?addbtnName:'添加'}}</a-button>
        <a-button type="primary" v-if="hasgoback" @click="handlegoback">返回</a-button>
      </a-space>
    </div>
    <a-table :dataSource="dataSource" :columns="columns" :loading="loading" :scroll="{ x: tableOtherobj.scroll }"
      :expandIconColumnIndex="expandIconSet.expandIconColumnIndex" :expandIconAsCell="expandIconSet.expandIconAsCell"
      @expand="handleexpand" @expandedRowsChange="expandedRowsChange" :row-selection="rowSelection || markread || rowSelection2
        ? { ...objrowSelection }
        : null
        " :pagination="pagination ? objArray.pagination : false">
      <template #bodyCell="{ column, record, index }">
        <slot name="customtable" :column="column" :record="record"></slot>
        <template v-if="column.key === 'operation'">
          <span>
            <slot name="operation" :column="column" :record="record"></slot>
            <a @click="editEvent('download', record)" v-if="operatingButton?.reportdownload">
              报表下载</a>
            <a-divider type="vertical" v-if="dividerbutton?.reportdownload" />
            <a @click="editEvent('detail', record)" v-if="operatingButton?.detail">
              查看</a>
            <a-divider type="vertical" v-if="dividerbutton?.detail" />
            <a @click="editEvent('edit', record)" v-if="operatingButton?.edit">修改</a>
            <a-divider type="vertical" v-if="dividerbutton?.edit" />
            <a @click="delEvent(record)" v-if="operatingButton?.del" style="color: red">删除</a>
            <a-divider type="vertical" v-if="dividerbutton?.del" />
          </span>
        </template>
        <template v-if="column.key === 'index'">
          <span>{{
            `${(objArray.pagination.current - 1) * objArray.pagination.pageSize +
              index +
              1
              }`
          }}</span>
        </template>
        <template v-if="column.key === objType.typeName && objType.isshow">
          <span :style="{
            color: objTypecolor.isshow
              ? objTypecolor[record[objType.typeName]]
              : null,
          }">{{ objType[record[objType.typeName]] }}</span>
          <!-- <span :style="{color:`#FF0000`}">{{
                        objType[record[objType.typeName]]
                    }}</span> -->
        </template>
        <template v-if="column.key === obj2Type?.typeName && obj2Type?.isshow">
          <span>{{ obj2Type[record[obj2Type.typeName]] }}</span>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>
import { reactive, ref, watch, toRefs } from "vue";
 
 
 
const props = defineProps({
  addbtnName: {
    type: String,
    default: ''
  },
  operatingButton: {
    //操作按钮
    reportdownload: {
      type: Boolean,
      default: false,
    },
    edit: {
      type: Boolean,
      default: true,
    },
    del: {
      type: Boolean,
      default: true,
    },
    detail: {
      type: Boolean,
      default: false,
    },
  },
  dividerbutton: {
    //操作按钮之间的分割线
    reportdownload: {
      type: Boolean,
      default: false,
    },
    edit: {
      type: Boolean,
      default: true,
    },
    del: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Boolean,
      default: false,
    },
  },
 
  allDel: {
    //按钮：全部删除
    type: Boolean,
    default: false,
  },
  columns: {
    //表格表头
    type: Array,
    default: [],
  },
  formessagedivider: {
    type: Boolean,
    default: false,
  },
  hasImport: {
    //按钮：导入
    type: Boolean,
    default: false,
  },
  hasExport: {
    //按钮：导出
    type: Boolean,
    default: false,
  },
  markread: {
    // 按钮：标记已读
    type: Boolean,
    default: false,
  },
  hasDetail: {
    //表格详情
    type: Boolean,
    default: false,
  },
  tableOtherobj: {
    type: Object,
    default: {
      // hasAddbtn: true,// 表格上是否有添加按钮
      // hasDetail: false,//操作中是否有详情
      scroll: false, //表格是否有横向滚动，以及x,方向的 值是多少  number
      actionwidth: "120",
    },
  },
  hasedit: {
    //表格修改
    type: Boolean,
    default: true,
  },
  hasdel: {
    //表格删除
    type: Boolean,
    default: true,
  },
  hasseeprocess: {
    //表格查看过程
    type: Boolean,
    default: false,
  },
 
  pagination: {
    //分页
    type: Boolean,
    default: true,
  },
 
  // 是否有批量操作
  rowSelection: {
    type: Boolean,
    default: false,
  },
  rowSelection2: {
    // 是否可以选择
    type: Boolean,
    default: false,
  },
  hasgoback: {
    //返回按钮
    type: Boolean,
    default: false,
  },
  searchkey: {
    // 查询的字段
    type: Object,
    default: {},
  },
  objType: {
    //后台返回摸个字段，不能直接显示，而是根据不同值显示对应的其他内容
    type: Object,
    default: {
      isshow: false, //是否显示
      typeName: "type", // 属性值 '需要转义的表格字段,当type=1时显示公司级；当typ=2时显示部门级'
      1: "公司级",
      2: "部门级",
    },
  },
  obj2Type: {
    //页面需要两个字段都用枚举时
    type: Object,
    default: {
      isshow: false, //是否显示
      typeName: "type", // 属性值 '需要转义的表格字段,当type=1时显示公司级；当typ=2时显示部门级'
      1: "公司级",
      2: "部门级",
    },
  },
  objTypecolor: {
    type: Object,
    default: {
      isshow: false, //是否显示
      typeName: "monitorDataReportType", // 属性值 '需要设置颜色的字段'
      day: "#FF0000",
      month: "#FFFF00",
    },
  },
  expandIconSet: {
    // 表格嵌套时，那个控制的展开折叠图表的位置
    type: Object,
    default: {
      expandIconColumnIndex: 2, //想让展开图标放在第几列
      expandIconAsCell: false, 想让展开图标放在第几列 设置的配套属性
    },
  },
 
  loading: false, //表格loading
});
const {
  objTypecolor,
  obj2Type,
  operatingButton,
  dividerbutton,
  formessagedivider,
  markread,
  columns,
  hasImport,
  hasExport,
  hasDetail,
  tableOtherobj,
  hasedit,
  hasdel,
  hasseeprocess,
  pagination,
  rowSelection,
  hasgoback,
  searchkey,
  objType,
  expandIconSet,
} = toRefs(props);
 
 
 
// 发送给父组件的方法
const emits = defineEmits([
  "openModel",
  "handleDelTable",
  "getData",
  "FlagRead",
  "handleTableRowSelec",
  "exportXlsx",
  "importXlsx",
]);
 
// 批量删除
let flagselectedRowKeys = ref(true);
let selecrowdata = ref();
const objrowSelection = {
  // selectedRowKeys: selectedRowKeys,
 
  //selectedRowKeys 选中行的datasource 中元素key的值； selectedRows为所选元素中datasource 是一个数组。
  onChange: (selectedRowKeys, selectedRows) => {
    let falg = selectedRowKeys.length ? false : true;
    flagselectedRowKeys.value = falg;
    selecrowdata.value = [...selectedRowKeys];
    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    emits("handleTableRowSelec", selectedRowKeys, selectedRows);
  },
};
 
// 返回
const handlegoback = () => {
  history.back();
};
// 操作
const editEvent = (param1, param2) => {
  emits("openModel", param1, param2);
};
const delEvent = (param1, param2) => {
  emits("handleDelTable", param1);
};
const handleFlagRead = () => {
  emits("FlagRead", selecrowdata);
};
// 分页方法
let objArray = reactive({
  // 请求参数
  searchParams: {},
  // 分页信息
  pagination: {
    current: 1,
    total: 0,
    pageSize: 25,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条`,
    pageSizeOptions: ['1',"15", "20", "25", "30", "40"],
    onChange: (page, pageSize) => {
      handleSizeChange(page, pageSize);
    },
  },
  // 批量选中
  selectedRowKeys: [],
  // 选中的行数据
  selectedRows: [],
});
 
const handleSizeChange = (page, pageSize) => {
  if (objArray.pagination.pageSize != pageSize) {
    objArray.pagination.current = 1;
    objArray.pagination.pageSize = pageSize;
  } else {
    objArray.pagination.current = page;
  }
  emits("getData", props.searchkey, objArray.pagination);
};
// 嵌套子表格
const handleexpand = (expanded, record) => {
  console.log(expanded, record, "expanded, record");
};
const expandedRowsChange = (expandedRows) => {
  console.log(expandedRows, "expandedRows");
};
 
// 导出全部
const handleAllExport = () => {
  emits("exportXlsx");
};
// 导入
const headers = {
  authorization: "authorization-text",
};
const fileList = ref([]);
const handleChange = (info) => {
  if (info.file.status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === "done") {
    message.success(`${info.file.name} file uploaded successfully`);
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
  emits("importXlsx", info);
};
const handleImportant = () => { };
const dataSource = ref([]);
const getData = (data, total) => {
 
  dataSource.value = data;
  objArray.pagination.total = total;
};
const setpage = (pageojb) => {
  objArray.pagination.current = pageojb.current
  objArray.pagination.pageSize = pageojb.pageSize
}
defineExpose({ getData, setpage });
</script>
<style lang="less" scoped>
.btn-add {
  text-align: right;
  /* margin-bottom: 20px; */
  /* margin-top: 20px; */
}
 
:deep(.ant-select-single:not(.ant-select-customize-input)) {
  .ant-select-selector {
    height: 24px !important;
  }
}
 
:deep(.ant-select-single) {
  .ant-select-selector {
    .ant-select-selection-item {
      line-height: 22px !important;
    }
  }
}
</style>

 使用：

<ComtableListR ref="tablistRef" :hasImport="false" :loading="loading" :hasExport="false"
      :dividerbutton="dividerbutton" :operatingButton="operatingButton" @getData="getData" :columns="columns"
      @openModel="openModel">
      <template #operation="{ column, record }">
        <a @click="openModal('准则类型', record)"> 准则类型</a>
        <a-divider type="vertical" />
        <a @click="openModal('等级判定', record)"> 等级判定</a>
        <a-divider type="vertical" />
      </template>
    </ComtableListR>
import {
  columns,
  formListEdit,
  dividerbutton,
  operatingButton,
} from "./data";
import ComtableListR from "@/components/ComtableListR.vue";
 
 
const getData = async (from, param2) => {
  let params = {
    SkipCount: ((param2?.current ? param2?.current : 1) - 1) * (param2?.pageSize ? param2?.pageSize : 25),
    MaxResultCount: (param2?.pageSize ? param2?.pageSize : 25),
  };
  loading.value = true
  const res = await getRiskEvaluation(params);
  loading.value = false
  tablistRef.value.getData([...res.Items], Number(res.TotalCount));
};
 
const openModel = (param1, param2) => {
  mainedit.value = true
  switch (param1) {
    case "edit":
      formList.value = [...formListEdit];
      title.value = "修改";
      detailData(param2.Id).then((res) => {
        // res.createtime = dayjs(res.createtime);
        res.RiskEvaluationMethodDisplayName = res?.RiskEvaluationMethod?.DisplayName ? res?.RiskEvaluationMethod?.DisplayName : ""
        refcomDrawer.value.showModal(true, res);
      });
      visible.value = true;
      drawerBtn.value = true;
      break;
  }
};
 
const openModal = (type, record) => {
  mainedit.value = false
  modalId.value = record.Id
  switch (type) {
    case "准则类型":
      modalTitle.value = type;
      modalRef.value.showModal(true);
      modalColumns.value = typeColumns;
      nextTick(() => {
        getModalData();
      });
      break;
    case "准则配置":
      modalTitle.value = '准则配置';
      modalRef2.value.showModal(true);
      nextTick(() => {
        getConfigData()
      });
      break;
    case "等级判定":
      modalTitle.value = type;
      modalRef.value.showModal(true);
      modalColumns.value = judgeColumns;
      nextTick(() => {
        getModalData();
      });
      break;
  }
};

data.js

export const columns = [
    {
        title: '序号',
        dataIndex: 'index',
        key: 'index', align: 'center',
        width: 80,
        ellipsis: true
    },
    {
        title: '名称',
        dataIndex: 'DisplayName',
        key: 'DisplayName', align: 'center',
        width: 80,
        ellipsis: true
    },
    {
        title: '函数地址',
        dataIndex: 'ResultCalculateApi',
        key: 'ResultCalculateApi', align: 'center',
        width: 80,
        ellipsis: true
    },
    {
        title: '创建人',
        dataIndex: 'CreatorDisplayName',
        key: 'CreatorDisplayName', align: 'center',
        customRender: ({ text ,record}) => {
            // console.log(record,'rrrrrrrrr')
            return  record?.Creator?.DisplayName?record?.Creator?.DisplayName:""
        },
        width: 80,
        ellipsis: true
    },
    {
        title: '创建时间',
        dataIndex: 'CreationTime',
        key: 'CreationTime', align: 'center',
        customRender: ({text})=>{
            return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
        },
        width:160,
        ellipsis: true
    },
    {
        title: '上次修改人',
        dataIndex: 'LastModifierDisplayName',
        key: 'LastModifierDisplayName', align: 'center',
        customRender: ({ text ,record}) => {
            // console.log(record,'rrrrrrrrr')
            return  record?.LastModifier?.DisplayName?record?.LastModifier?.DisplayName:""
        },
        width: 80,
        ellipsis: true
    },
    {
        title: '上次修改时间',
        dataIndex: 'LastModificationTime',
        key: 'LastModificationTime',
        align: 'center',
        customRender: ({ text }) => {
            let onetext=dayjs(text).format('YYYY-MM-DD HH:mm:ss')
            let TwoText= text?onetext :""
            return TwoText
        },
        width: 160,
        ellipsis: true
    },
    { title: "操作", dataIndex: "operation", key: "operation", align: 'center',
    width: 200},
]
// operating button 操作按钮
export const operatingButton = {
    reportdownload: false,
    edit: true,
    del: false,
    detail: false,
    addbtn: false
}
export const dividerbutton = {
    reportdownload: false,
    edit: false,
    detail: false
}