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

1.普通的表格组件效果

ComtableListR.vue组件

 使用：

      
    
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
}