card组件
card 需要传入的是title 判断是否有点击按钮
使用
1 在main.js 注册
2 在页面中使用
<zc-card title="用户列表" btnName="创建用户" url="users/create">
<template #filter>
<el-input v-model="params.uname">
<el-button slot="append" icon="el-icon-search" @click="init()">
</el-button>
</el-input>
<el-date-picker
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="time"
>
</el-date-picker>
</template>
</zc-card>
table组件
封装的意义 el-table 太冗余 在template中太长 el-table-column
是否有自定义列
<template>
<el-table :data="tableData">
<template v-for="(item, index) in columns">
<!-- 自定义数据 -->
<el-table-column
:prop="item.field"
:label="item.title"
:key="index"
v-if="item.type"
:width="item.width"
>
<template slot-scope="scope">
<!-- 内容 -->
<el-switch
v-if="item.type === 'switch'"
v-model="scope.row.state"
active-color="#13ce66"
inactive-color="#ff4949"
@change="item.payload.change(scope.row)"
>
</el-switch>
<template v-if="item.type === 'btn'">
<el-button
v-for="(btnItem, btnIndex) in item.payload"
:key="btnIndex"
:type="btnItem.type"
:size="btnItem.size"
@click="btnItem.click(scope.row)"
>
<i :class="btnItem.icon"></i>
{{ btnItem.name }}
</el-button>
</template>
<!-- 内容 -->
</template>
</el-table-column>
<!-- 自定义数据 -->
<!-- 默认填充 直接显示原数据 -->
<el-table-column
v-else
:prop="item.field"
:label="item.title"
:key="index"
:width="item.width"
></el-table-column>
<!-- 默认填充 直接显示原数据 -->
</template>
</el-table>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
required: true,
},
columns: {
type: Array,
required: true,
},
},
};
</script>
使用需要传递二个参数
<zc-table :tableData="tableData" :columns="columns"></zc-table>
columns: [
{ title: "编号", field: "user_id", width: 200 },
{ title: "所属角色", field: "role_name", width: 100 },
{ title: "用户名", field: "username", width: 100 },
{ title: "手机号", field: "mobile", width: 130 },
{
title: "冻结",
type: "switch",
payload: {
open: true,
close: false,
change: (row) => console.log(row),
},
},
{ title: "更新于", field: "create_time", width: 200 },
{
title: "操作",
width: 300,
fixed: "right",
type: "btn",
payload: [
{
name: "修改用户",
type: "primary",
size: "mini",
click: (row) => {
this.dialogState = true;
},
},
{
name: "分配角色",
type: "success",
size: "mini",
click: (row) => {
this.UserAssignRoleState = true;
},
},
{
name: "删除",
size: "mini",
type: "danger",
click: (row) => {
this.confirmFn(() => {
this.$message.success("等待请求接口");
});
},
},
],
},
],
form组件
判断各个类型
<template>
<el-form :rules="formItem.rules" :model="formData" ref="form">
<template v-for="(item, i) in formItem">
<!-- 内容 -->
<el-form-item
:label="item.label"
:prop="item.field"
:key="i"
:rules="item.rules"
:label-width="item.width + 'px'"
>
<!-- input -->
<el-input
v-if="item.type === 'input'"
:disabled="item.disabled"
:placeholder="item.placeholder"
:icon="item.icon"
v-model="formData[item.field]"
></el-input>
<!-- input -->
<!-- password -->
<el-input
v-if="item.type === 'password'"
:disabled="item.disabled"
:placeholder="item.placeholder"
:icon="item.icon"
v-model="formData[item.field]"
></el-input>
<!-- password -->
<!-- select -->
<el-select
v-if="item.type === 'select'"
:placeholder="item.placeholder"
v-model="formData[item.field]"
>
<el-option
v-for="(selectItem, selectIndex) in item.payload"
:key="selectIndex"
:label="selectItem.label"
:value="selectItem.value"
>
</el-option>
</el-select>
<!-- select -->
</el-form-item>
<!-- 内容 -->
</template>
<el-form-item :key="index">
<template v-for="(btnItem, btnIndex) in formBtns">
<el-button
v-if="formBtns"
:key="btnIndex"
:type="btnItem.type"
@click="submitFn(btnItem.content, btnItem.click)"
>
{{ btnItem.content }}
</el-button>
</template>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {},
index: "",
};
},
props: {
formItem: {
type: Array,
required: true,
},
formBtns: {
type: Array,
},
},
methods: {
submitFn(content, callback) {
if (content == "重置") {
this.$refs.form.resetFields();
}
this.$refs.form.validate((isSuccuss) => {
callback(this.formData);
});
},
},
};
</script>
使用
<zc-form :width="80" :formItem="formItem" :formBtns="formBtns"></zc-form>
formItem: [
{
label: "手机号",
width: 100,
rules: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
validator: iphoneRules,
trigger: "blur",
},
],
field: "mobile",
placeholder: "请输入👋🐔号",
type: "input",
},
{
label: "用户名",
width: 100,
rules: [
{ required: true, message: "用户名必须", trigger: "blur" },
{ min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
],
field: "username",
placeholder: "请输入用户名",
type: "input",
},
{
label: "密码",
width: 100,
rules: [
{ required: true, message: "密码必须", trigger: "blur" },
{ min: 3, max: 5, message: "至少3~5个字符", trigger: "blur" },
],
field: "password",
placeholder: "请输入密码",
type: "password",
},
{
label: "请选择密保问题",
width: 200,
field: "question",
rules: [
{ required: true, message: "请选择密保问题", trigger: "change" },
],
disabled: true,
placeholder: "请输入密保问题",
type: "select",
payload: [
{ label: "你大爷名字", value: "你大爷名字" },
{ label: "您其中唯一讲师的名字", value: "您其中唯一讲师的名字" },
{ label: "你初念的名字", value: "你初念的名字" },
],
},
{
label: "密保答案",
field: "answer",
placeholder: "请输入密保答案",
width: 100,
type: "input",
rules: [
{ required: true, message: "请输入密保答案", trigger: "blur" },
{ min: 3, max: 8, message: "至少3~8个字符", trigger: "blur" },
],
},
],
formBtns: [
{
content: "创建",
type: "primary",
click: async (formData) => {
console.log("表单数据", formData);
let res = await postUsersApi(formData);
if (res.meta.state === 201) {
this.$message.success(res.meta.msg);
this.jumpFn("/users");
} else {
this.$message.error(res.meta.msg);
}
},
},
{
content: "重置",
type: "warning",
},
],