MTable 表格

MTable 组件可以满足多数后台系统 你可以把 MTable 组件当成 Form 组件使用，因为 MTable 集成了 Form 组件，table 组件，分页组件 当 table 组件交互比较复杂事，可以单独引入 table 组件，table 里需要使用 input，switch,按钮时，需要单独引入插槽，如下

基础使用

Date
昵称
状态
No Data
Total 0
  • 1
Go to
MTable.vue
<template>
  <div>
    <Dialog
      :width="500"
      :dialogVisible="state.dialogVisible"
      :title="state.isAdd ? '新增' : '编辑'"
      @closeDialog="closeDialog"
    >
      <Form
        ref="refForm"
        :formColumns="state.dialogColumns"
        :inline="false"
        @imgSuccess="imgSuccess"
        @imgRemove="imgRemove"
        @formEvent="diaFormEvent"
      />
    </Dialog>
    <MTable
      :columns="columns"
      :formColumns="formColumns"
      :tableData="state.tableData"
      :pageInfo="state.pageInfo"
      :btnByStateMap="btnByStateMap"
      btnByStateMapAt="state"
      @formEvent="formEvent"
      @tableBtnEvent="tableBtnEvent"
      @pageSizeEvent="pageSizeEvent"
      @pageEvent="pageEvent"
      @resetSearch="resetSearch"
      @tableInput="tableInput"
      @tableBlur="tableBlur"
      @switchChange="switchChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, h } from "vue";
import { MTable, Dialog, Form } from "el-table-jsx";
import {
  columns,
  formColumns,
  btnByStateMap,
  dialogColumns,
  _tableData,
} from "./config.js";
import { ElMessageBox } from "element-plus";

const refForm = ref(null);

const state = reactive({
  // 0=>显示所有; 1=>通过; 2=>取消; 3=>禁用
  tableData: [],
  total: 0,
  pageInfo: {
    total: 0,
    pageSize: 5,
    pageNum: 1,
  },
  lastFilter: {},
  dialogVisible: false,
  dialogColumns,
  isAdd: true,
});

onMounted(() => {
  getList({});
});

const getList = async (params) => {
  const _params = {
    pageNum: state.pageInfo.pageNum,
    pageSize: state.pageInfo.pageSize,
    ...state.lastFilter,
    ...params,
  };
  try {
    // let { data } = await axios.post("/api/getList", _params);
    state.tableData = _tableData.map((item) => ({
      ...item,
      name: `昵称: ${item.name}\n用户名: ${item.name}`,
    }));

    state.pageInfo.total = _tableData.length;
  } catch (error) {
    console.error("Error fetching list:", error);
  }
};

const formEvent = (e) => {
  // form=>操作栏form, btnInfo=》操作栏按钮信息
  const { form, btnInfo } = e;
  const actions = {
    0: () => {
      state.lastFilter = form;
      getList({ ...form, pageNum: 1 });
    },
    1: () => {
      state.isAdd = true;
      state.dialogVisible = true;
      state.dialogColumns[2].fileList = [];
    },
  };
  actions[btnInfo.btnId]?.();
};

const tableBtnEvent = (e) => {
  // btnIdx=>table栏，按钮对应的下标
  // colIdx=>table栏，当前列的索引
  // $index=>table栏，当前行下标
  // row=>table栏，当前行数据
  const {
    btn,
    scope: { $index, row },
  } = e;
  const actions = {
    0: () => rowDetails(btn, row),
    1: () => {
      state.isAdd = false;
      dialogFormDefaultValByRow(row);
      state.dialogVisible = true;
    },
    2: () => {},
    3: () => rowDetails(btn, row),
  };
  actions[btn.btnId]?.();
};

const dialogFormDefaultValByRow = (row) => {
  state.dialogColumns.forEach((item) => {
    if (item.prop && row.hasOwnProperty(item.prop)) {
      item.defaultVal = row[item.prop];
    }
  });
  state.dialogColumns[2].fileList = [{ url: row.imageUrl }];
};

const pageSizeEvent = (pageSize) => getList({ pageSize });

const pageEvent = (pageNum) => getList({ pageNum });

const resetSearch = (resetForm) => {
  state.lastFilter = {};
  getList({ pageNum: 1, pageSize: 5, ...resetForm });
};

const tableInput = (val, row) => {};

const tableBlur = (val, row) => {};

const imgSuccess = (res) => {
  // res=>接口返回的数据
  const defaultRes = {
    name: "图片",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
  };
  state.dialogColumns[2].fileList.push(defaultRes);
};

const imgRemove = (uploadFile, uploadFiles) => {
  state.changeDialogColumns[2].fileList = uploadFiles
}

const diaFormEvent = (e) => {
  const { btnInfo } = e;
  if (refForm.value) refForm.value.resetModelForm();
  const actions = {
    0: () => (state.dialogVisible = false),
    1: () => (state.dialogVisible = false),
  };
  actions[btnInfo.btnId]?.();
};

const switchChange = (bln, row) => rowDetails(bln, row);

const rowDetails = (btnOrBln, row) => {
  const isBln = typeof btnOrBln === "boolean";
  ElMessageBox({
    title: isBln ? "switch" : btnOrBln.label,
    message: h("p", null, [
      h("span", null, isBln ? "当前值是：" : "当前按钮下标是："),
      h("span", { style: "color: teal" }, isBln ? btnOrBln : btnOrBln.btnId),
      h("br"),
      h("span", null, "当前row是："),
      h("i", { style: "color: teal" }, JSON.stringify(row)),
    ]),
  });
};

const closeDialog = () => {
  state.dialogVisible = false;
  state.dialogColumns[2].fileList = [];
  state.dialogColumns.forEach((item) => (item.defaultVal = null));
  if (refForm.value) refForm.value.resetModelForm();
};
</script>

<style>
.el-table .cell {
  white-space: pre-line;
}

</style>

事件

事件名说明出参
onFormEventForm 表单事件e: {form, btnInfo}
onResetSearch重置搜索Formb 表单默认值
onRadioChange单选框e
inputBtnSearchinput 右边插槽按钮事件val
resetModelForm使用 ref 来调用子组件的 resetModelForm 方法FormRef.value.resetModelForm()，以达到清空数据的效果
onTableBtnEvent操作栏按钮事件e: {btn, colIdx, $index, row}
onTableInputinput 事件val， row
onSwitchChangeswitch 事件bln, row
onSelectionChangetable 多选事件row
onSortChangetable 表头排序事件sort
rowItemEventtable 里的 a 标签row
onRadioChange单选框e
inputBtnSearchinput 右边插槽按钮事件val
onPageSizeEvent页容量事件pageSize
onPageEvent当前页事件pageNum

属性

属性名说明默认值类型
formColumnsformColumns
inline行内表单模式trueboolean
labelWidth标签的长度，例如 '50'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 autonumber
labelPosition表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性rightstring
tableDatatable 源数据[]array
columnscolumns[]array
tableMultiple多选falseboolean
btnByStateMapAtcolumns 属性 keystring
btnByStateMap根据状态 columns 属性 key，显示不同的按钮{}object
defaultSort表头默认排序(是个对象){}object
pageInfo分页信息object
shortcuts设置快捷选项，需要传入数组对象不传默认展示 last week, last month, last 3 monthobject
Last Updated:
Contributors: const