概述
一、【主列表】list.vue
<template>
<!-- 外部用户 -->
<div class="externalUsers">
<el-form :inline="true" :model="queryParam" ref="queryParam" label-width="90px" class="demo-form-inline">
<el-form-item label="订单号：" prop="position">
<el-input v-model="queryParam.order_num" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="下单人：" prop="position">
<el-input v-model="queryParam.create_name" placeholder="请输入"></el-input>
</el-form-item>
<el-button type="primary" size="small" @click="conditionQuery">查询</el-button>
<el-button size="small" @click="resetQuery()">重置</el-button>
</el-form>
<el-button type="primary" size='small' @click="handleAdd('【动态传参】')" style="margin-left: 20px;">新增</el-button>
<!-- 内容区 -->
<el-row>
<el-container class="mian">
<!-- table表格 -->
<el-main>
<div class="table">
<el-table
ref="table"
:stripe="true"
:data="tableData"
:row-key="getRowKeys"
size="small"
:header-cell-style="{
'text-align': 'center',
background: '#fafafa'
}"
height="63vh"
@selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" :reserve-selection="true" width="60">
</el-table-column>
<el-table-column prop="order_num" label="订单号" sortable align="center">
</el-table-column>
<el-table-column prop="create_name" label="下单人" sortable align="center" width="200">
</el-table-column>
<el-table-column prop="create_phone" label="手机号" sortable align="center">
</el-table-column>
<el-table-column prop="client_name" label="客户名称" sortable align="center">
</el-table-column>
<el-table-column prop="annualCount" label="年费件数" sortable align="center">
</el-table-column>
<el-table-column prop="all_official_fee" label="官费金额" sortable align="center">
</el-table-column>
<el-table-column prop="all_agency_fee" label="代理费金额" sortable align="center">
</el-table-column>
<el-table-column prop="order_status" label="订单状态" sortable align="center">
</el-table-column>
<el-table-column prop="create_date" label="下单时间" sortable align="center" width="150">
</el-table-column>
<el-table-column fixed="right" label="操作" align="center" width="220">
<template slot-scope="scope">
<el-button type="text" size="small" v-if="scope.row.order_status_code =='F' || scope.row.order_status_code =='A' || scope.row.order_status_code =='C' || scope.row.order_status_code =='D'" @click="changeStatus('D',scope.row.order_num)">删除</el-button>
</template>
</el-table-column>
<!-- 空数据 -->
<div slot="empty" style="height: 63vh;display: flex;justify-content: center;align-items: center;">
<div>
<img src="../../../static/img/Group 6.png" />
<p>暂无数据</p>
</div>
</div>
</el-table>
<!-- 分页 -->
<div style="height: 50px;display: flex;justify-content: flex-end;align-items: center;margin-right: 10px;" class="myTranslationContent_page">
<!-- 当前页数，支持 .sync 修饰符 1 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="params.currPage"
:page-sizes="params.pageSizeArr"
:page-size="params.pageSize"
:layout="params.layout"
:total="params.totalCount">
</el-pagination>
</div>
</div>
</el-main>
</el-container>
</el-row>
<!-- 新增 -->
<com-modal ref="modalForm" @ok="modalFormOk"></com-modal>
</div>
</template>
<script>
import comModal from './modules/comModal'
import { CommonJs } from '../../api/common.js' //引入公共js
export default {
mixins:[CommonJs],
components: {
comModal
},
data() {
return {
url:{
list:"/api/AnnualFeeOrder/GetAnnualFeeOrderList",
},
};
},
computed: {
},
mounted() {
},
methods: {
},
created() {
},
};
</script>
<style scoped>
</style>
二、【新增】modal.vue
<template>
<div>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="30%"
>
<com-form ref="realForm" @ok="submitCallback"></com-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleOk">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import comForm from './comForm'
export default{
components: {
comForm
},
data(){
return{
title:'',
dialogVisible:false,
}
},
methods:{
add () {
this.dialogVisible = true
},
// 确定
handleOk(){
this.$refs.realForm.submitForm();
},
// form 触发此方法
submitCallback(){
this.$emit('ok',this.$refs.realForm.model); //触发list页面ok的方法
this.dialogVisible = false;
},
}
}
</script>
三、【新增】form.vue
<template>
<div>
<el-form ref="form" :model="model" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="model.name" placeholder="请输入活动名称"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="model.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
model:{}
}
},
created() {
this.modelDefault = JSON.parse(JSON.stringify(this.model));
},
methods:{
submitForm(){
//console.log(this.model);
this.$emit('ok',this.model); //触发父页面的submitCallback方法
},
}
}
</script>
四、【公共js】common.js
import Vue from 'vue'
export const CommonJs = {
data(){
return {
queryParam: {}, // 列表主页面查询条件
tableData: [], // 表格数据
// 分页参数
params: {
currPage: 1, //初始页面
pageSize: 5, // 每页的数据
totalCount: 0, //总共多少条数据
pageSizeArr:[2, 5, 10, 50,100,300], //条数切换
layout:'total,sizes, prev, pager, next, jumper',
condition:{}
},
checkData: [], // table 选中数据
checkDataID: [], // table选中数据ID
}
},
created() {
this.loadData();
},
methods:{
// ********************一、【新增】 弹框出现到保存成功，重新回调列表方法******************************************************************
// 新增
handleAdd(m) {
this.$refs.modalForm.add();
this.$refs.modalForm.title = "新建" + m;
this.$refs.modalForm.disableSubmit = false;
},
// 新增弹框 保存方法（获取form值；调用保存接口；清空列表勾选）
modalFormOk(params){
console.log(params) //$emit传参
// 新增/修改 成功时，重载列表
this.loadData();
//清空列表选中
this.$refs.table.clearSelection()
this.onClearSelected()
},
// 新增弹窗 保存方法清空列表选中的值
onClearSelected(){
this.checkData = []; // table 选中数据
this.checkDataID = []; // table选中数据ID
},
// ********************二、【列表】*********************************
// 初始化获取列表数据
loadData(){
var _this = this;
this.$http
.post(this.url.list, this.params)
.then(function(res) {
if (res.data.resultcode == 200) {
_this.tableData = res.data.result;
_this.params.totalCount = Number(res.data.total)
}
})
.catch((error) => {});
},
// 查询
conditionQuery() {
// 对象拼接
// this.params = Object.assign(this.params,this.queryParam);
this.params.condition = this.queryParam;
this.loadData();
},
// 重置
resetQuery() {
this.queryParam = {};
this.params.condition = {}
this.params.currPage = 1
this.params.pageIndex = 1;
this.loadData();
},
// 列表复选框选中赋值
handleSelectionChange(val) {
this.checkData = val;
},
/*
分页的记忆功能，分页保存选中的数据
:row-key="getRowKeys"
:reserve-selection="true"
*/
getRowKeys(row) {
return row.order_num; // n_ID为列表数据的唯一标识
},
// 分页每页展示条数更改
handleSizeChange(val) {
this.params.currPage = 1;
this.params.pageSize = val;
this.loadData();
},
//分页切换
handleCurrentChange(val) {
this.params.pageIndex = val;
this.loadData();
},
// ********************************************************
}
}
最后
以上就是包容学姐为你收集整理的vue + element 列表 新增 查询 封装的全部内容，希望文章能够帮你解决vue + element 列表 新增 查询 封装所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复