0.3.0 • Published 1 year ago
@mmui/mtable v0.3.0
mtable
项目依赖
// 依赖vue2 和 view-design, 不支持vue3
yarn add vue@2.6.14 view-design@4.7.0
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>
0.3.0
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.8
1 year ago
0.1.7
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago