mtable

项目依赖

    // 依赖vue2 和 view-design, 不支持vue3
    yarn add [email protected] [email protected]

      columns: { //列表字段格式
         type: Array,
         required: true,
      },
      data: { //数据源
         type: Array,
         required: true,
      },
      action: { //打开模式 modal=弹窗, row=行 
         type: Object,
         default: () => {
            return {
               create: true,
               editType: "modal", //editType编辑模式 modal=弹窗, row=行
            };
         },
      },
      //stripe: { type: Boolean, default: true },
      //显示头部
      showHeader: {
         type: Boolean,
         default: true,
      },
      //控制加载loading
      loading: {
         type: Boolean,
         default: false,
      },
      //弹窗加载进度
      loadingModal: { type: Boolean, default: false },
      size: {
         type: String,
      },
      modalWidth: {
         type: [Number, String],
         default: 600,
      },
      height: {
         type: [Number, String],
      },
      onSelect: Function,
      onSelectionChange: Function,
      //规则 保存，修改表单规则
      rules: {
         type: Object,
         default: () => {
            return {};
         },
      },
      page: {
         type: Object,
         default: () => {
            return { pageSize: 20, pageNo: 1, totalPage: 0, total: 0 };
         },
      },
      search: {
         //搜索条件
         type: Object,
         default: () => {
            return {
               q: "",
            };
         },
      },
      header: {
         type: Object,
         default: () => {
            return {
               fullable: false, //true=通过slot重写header, false= 只能append查询条件
            };
         },
      },
      onSave: Function, //保存 ({})
      onSearch: Function, //搜索 ({}, page)
      onRemove: Function, //删除事件 ([ids])
      findItem: {
         type: Function,
         default: (item) => {
            return this.columns.find((sitem) => sitem.id == item.id);
         },
      },

mtable使用

使用

<!-- 我的页面 -->
<template>
   <div>
      <!--Table border :columns="columns7" :data="data6" @on-search="onSearch"></Table-->
      <MTable
         :columns="columns"
         :data="dataList"
         :loading="loading"
         :loadingModal="loadingModal"
         @on-save="onSave"
         @on-remove="onRemove"
         :action="action"
         :page="page"
         @on-search="onSearch"
         no-data-text="没有数据"
         :rules="rules"
      >
         <!--template v-slot:search="{search, page}">
      
         </template-->
      </MTable>
   </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import dayjs from "dayjs";

export default {
   // import引入的组件需要注入到对象中才能使用
   components: {  },
   data() {
      // 这里存放数据
      return {
         loading: false,
         loadingModal: false,
         page: {
            pageSize: 20,
            pageNo: 1,
            totalPage: 0,
         },
         action: {
            editType: "modal", //modal
            width: 120,
            columns: [],
         },
         rules: {
            username: [
               { required: true, message: "用户名不能为空", trigger: "blur" },
               { type: "string", min: 4, max: 20, message: "用户长度4-20", trigger: "blur" },
            ],
            password: [
               { required: true, message: "密码不为能空", trigger: "blur" },
               { type: "string", min: 6, max: 32, message: "密码长度6-32", trigger: "blur" },
            ],
            nick: [
               { required: true, message: "昵称不为能空", trigger: "blur" },
               { type: "string", min: 1, max: 20, message: "昵称长度1-20", trigger: "blur" },
            ],
            status: [{ required: true, message: "状态不为能空", trigger: "blur", validator: (rule, value) => value >= 0 }],
         },
         columns: [
            {
               type: "selection",
               width: 60,
               align: "center",
            },
            {
               title: "id",
               key: "id",
               maxWidth: 90,
               mtable: {
                  isEdit: false,
                  isCreate: false,
                  columnShow: true,
               },
            },
            {
               title: "用户名",
               key: "username",
               mtable: {
                  isEdit: false,
                  isCreate: true,
                  columnShow: true,
                  tag: "Input",
               },
            },
            {
               title: "密码",
               key: "password",
               mtable: {
                  isEdit: true,
                  isCreate: true,
                  columnShow: false,
                  tag: "Input",
                  type: "password",
               },
            },
            {
               title: "昵称",
               key: "nick",
               mtable: {
                  isEdit: true,
                  isCreate: true,
                  columnShow: true,
                  tag: "Input",
               },
            },
            {
               title: "状态",
               key: "status",
               mtable: {
                  isEdit: true,
                  isCreate: true,
                  columnShow: true,
                  tag: "Select",
                  list: [
                     {
                        value: 1,
                        label: "正常",
                     },
                     {
                        value: 0,
                        label: "禁用",
                     },
                  ],
               },
            },
            {
               title: "创建时间",
               key: "createAt",
               mtable: {
                  isEdit: false,
                  isCreate: false,
                  columnShow: true,
                  tag: "Date",
                  type: "date",
               },
            },
            {
               title: "code",
               key: "code",
               height: "300px",
               mtable: {
                  isEdit: true,
                  isCreate: true,
                  columnShow: false,
                  
                  tag: "code-editor",
               },
            },
            {
               title: "text",
               key: "text",
               height: "300px",
               mtable: {
                  isEdit: true,
                  isCreate: true,
                  columnShow: false,
                  
                  tag: "texta-editor",
               },
            },
         ],
         dataList: [],
      };
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
   watch: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
      this.onSearch({ q: "" });
   },
   beforeCreate() {}, // 生命周期 - 创建之前
   beforeMount() {}, // 生命周期 - 挂载之前
   beforeUpdate() {}, // 生命周期 - 更新之前
   updated() {}, // 生命周期 - 更新之后
   beforeDestroy() {}, // 生命周期 - 销毁之前
   destroyed() {}, // 生命周期 - 销毁完成
   activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
   // 方法集合
   methods: {
      async onSearch(query, page) {
         query = Object.assign({ q: "" }, query);
         this.loading = true;
         this.dataList = [{ id: 11, username: "chen", status: 1, nick: "chen", createAt: new Date() }]; //.map((v) => ({ ...v, __remove: false, __edit: false }));
         Object.assign(this.page, {
            total: 10,
            totalPage: 2,
         });
         this.loading = false;
      },
      async onSave({ form, update, type, callback }) {
         this.loadingModal = true;
         update.id=Math.ceil(Math.random() * 9999);
         update.createAt = new Date();
         callback(update);
         this.loadingModal = false;
      },
      async onRemove(list, callback) {
         console.info(
            "list",
            list,
            list.map((v) => v.id),
         );
      },
   },
};
</script>

<style lang="less" scope></style>