vue-element-admin框架 查询Form组件、表单分页组件二次封装-造轮子（四）
新建文件
index.js
import QueryForm from "./QueryForm.vue";
QueryForm.install = (Vue) => {
Vue.component(QueryForm.name, QueryForm);
};
export default QueryForm;
全局注册
修改main.js
import QueryForm from "./../packages/QueryForm/index";
Vue.use(QueryForm);
QueryForm.vue
<template>
<el-form ref="queryForm" :inline="true" :model="queryModel">
<template v-for="(item, index) in form">
<FormItem
:key="index"
:item="item"
v-bind="item"
v-model="queryModel[item.model]"
/>
</template>
<el-form-item>
<el-button type="primary" @click="handleQuery()" icon="el-icon-search"
>查询</el-button
>
<el-button @click="handleReset()" icon="el-icon-delete">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import FormItem from "./FormItem.vue";
export default {
components: { FormItem },
name: "QueryForm",
// props: ["form", "queryModel"],
props: {
queryModel: {
type: Object,
},
form: {
type: Array,
},
},
// data() {
// return {
// queryModel: { ...this.queryModel },
// };
// },
methods: {
handleQuery(queryForm) {
this.$emit("handleQuery", { ...this.queryModel });
},
handleReset() {
// console.log(JSON.stringify(this.item) + "111111111111111111111111111111");
// console.log(
// JSON.stringify(this.queryModel) + "2222222222222222222222222222222"
// );
// console.log(JSON.stringify(this.form) + "3333333333333333333333333333");
this.$emit("handleReset", { ...this.queryModel });
},
},
};
</script>
FormItem.vue
<template>
<el-form-item :prop="item.model" v-bind="$attrs">
<el-input
v-if="item.type == 'input'"
v-bind="$attrs"
v-on="$listeners"
></el-input>
<el-select
v-else-if="item.type == 'select'"
v-bind="$attrs"
v-on="$listeners"
>
<el-option
v-for="option in item.options"
:key="option.value"
v-bind="option"
/>
</el-select>
</el-form-item>
</template>
<script>
export default {
name: "QueryForm",
inheritAttrs: false,
props: ["item"],
setup() {},
};
</script>
UserList.vue
<query-form
:form="form"
:queryModel="queryModel"
@handleQuery="searchList"
@handleReset="cacelList"
/>
-----------------------
data() {
return {
form: [
{
type: "input",
label: "用户id",
model: "userID",
placeholder: "请输入用户ID",
},
{
type: "input",
label: "用户名称",
model: "userName",
placeholder: "请输入用户名称",
},
{
type: "select",
label: "状态",
model: "state",
placeholder: "请选择状态",
options: [
{
label: "所有",
value: 0,
disabled: true,
},
{
label: "在职",
value: 1,
},
{
label: "离职",
value: 2,
},
{
label: "试用期",
value: 3,
},
],
},
],
//搜索框数据域
queryModel: {
userID: "",
userName: "",
},
}
}
-------------------
methods: {
//取消按钮
cacelList(queryModel) {
console.log("queryModel00000000000000000000000000", queryModel);
},
//查询按钮
searchList(queryModel) {
console.log("queryModel111111111111111111111111111", queryModel);
},
}
效果
新建文件
index.js(1)
import BaseTable from "./BaseTable.vue";
BaseTable.install = (Vue) => {
Vue.component(BaseTable.name, BaseTable);
};
export default BaseTable;
index.js(2)
import QueryForm from "./QueryForm";
import BaseTable from "./BaseTable";
export default {
install(Vue) {
Vue.use(QueryForm);
Vue.use(BaseTable);
},
};
main.js
import Rocket from "./../packages";
Vue.use(Rocket);
BaseTable.vue
<template>
<div class="base-table">
<div class="action">
<slot name="action"></slot>
</div>
<el-table v-bind="$attrs" v-on="$listeners">
<template v-for="item in columns" v-bind="$attrs" v-on="$listeners">
<el-table-column
:key="item.prop"
type="selection"
width="55"
v-if="item.type == 'selection'"
/>
<el-table-column
:key="item.prop"
v-bind="item"
v-else-if="!item.type"
></el-table-column>
<el-table-column
:key="item.prop"
v-if="item.type == 'action'"
v-bind="item"
>
<template #default="scope">
<template v-for="(btn, index) in item.list">
<el-button
:key="index"
:type="btn.type || 'text'"
size="mini"
@click="handleAction(index, scope.row)"
v-if="btn.visible"
>
{{ btn.text }}
</el-button>
</template>
</template>
</el-table-column>
</template>
</el-table>
<el-pagination
v-bind="$attrs"
v-on="$listeners"
class="pagination"
background
layout="prev,pager,next"
:total="pager.total"
:page-size="pager.pageSize"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: "BaseTable",
inheritAttrs: false,
props: ["columns", "pager"],
methods: {
handleAction(index, row) {
this.$emit("handleAction", { index, row: { ...row } });
console.log(
"index:" +
JSON.stringify(index) +
"3333333333333333333333333333" +
JSON.stringify(row)
);
},
handleCurrentChange(pageNum) {
// console.log(JSON.stringify(this.form) + "3333333333333333333333333333");
this.$emit("handleCurrentChange", pageNum);
},
},
setup() {},
};
</script>
<style lang="scss">
/*
* 公共样式
*/
.query-form {
background-color: #ffffff;
padding: 22px 20px 0;
border-radius: 5px;
}
.base-table {
border-radius: 5px;
background: #ffffff;
margin-top: 20px;
margin-bottom: 20px;
.action {
border-radius: 5px 5px 0px 0px;
background: #ffffff;
padding: 20px;
border-bottom: 1px solid #ece8e8;
}
.pagination {
text-align: right;
padding: 10px;
}
}
</style>
UserList.vue
<base-table
:columns="columns"
:data="userTableData"
:pager="pager"
@selection-change="handleSelectionChange"
@handleAction="handleAction"
@handleCurrentChange="handleCurrentChange"
>
<template v-slot:action>
<el-button type="primary" @click="handleCreate">新增</el-button>
<el-button type="danger" @click="handlePatchDel">批量删除</el-button>
</template>
</base-table>
data(){
return{
columns: [
{
type: "selection",
},
{
label: "用户名",
prop: "loginName",
},
{
label: "所属部门",
prop: "deptName",
},
{
label: "电话",
prop: "mobile",
},
{
label: "邮箱",
prop: "email",
},
{
type: "action",
label: "操作",
width: 150,
list: [
{
type: "primary",
text: "编辑",
visible: true,
},
{
type: "danger",
text: "删除",
visible: true,
},
],
},
],
// 选中用户列表对象
checkedUserIds: [],
pager: {
pageNum: 1,
pageSize: 10,
// currentPage: 1,
// total: 0,
},
}}
methods: {
handleAction({ index, row }) {
console.log("index:" + index + "000000000000000033333333333333" + row);
// if(index==0){
// editUser(row)
// }
// else if(index == 1){
// deleteUser(row)
// }
},
handleSelectionChange(list) {
let arr = [];
list.map((item) => {
arr.push(item.mobile);
});
console.log(arr);
this.checkedUserIds = arr;
console.log(this.checkedUserIds + "aaaaaaaaaaaaaaaaaaaaaa");
console.log(this.checkedUserIds.length + "ggggggggggg");
},
handleCreate() {},
handlePatchDel() {
if (this.checkedUserIds.length == 0) {
this.$message.error("请选择要删除的用户");
return;
}
// const res = await this.$api.userDel({
// userIds: checkedUserIds.value, //可单个删除，也可批量删除
// });
// if (res.nModified > 0) {
// this.$message.success("删除成功");
// getUserList();
// } else {
// this.$message.success("修改失败");
// }
},
handleCurrentChange(pageNum) {
console.log("pageNum:" + pageNum);
// this.pager.pageNum = pageNum;
// this.assignRoleList();
},
}
注：total是动态添加的属性