1.基础的表格（前端）
<a-table
ref="table"
size="middle"
:scroll="{x:true}"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
class="j-table-force-nowrap"
@change="handleTableChange">
<span slot="action" slot-scope="text, record">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
<a-menu slot="overlay">
<a-menu-item>
<a @click="handleDetail(record)">详情</a>
</a-menu-item>
<a-menu-item>
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
<a>删除</a>
</a-popconfirm>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</a-table>
其中配置
columns 表格列的配置描述
bordered 表格中是否有边框线
rowKey 行的唯一标识
:dataSource 数据源
pagination 分页
数据源查看
定义在 JeecgListMixin 我们上面的页面必须引入
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export const JeecgListMixin = {
data(){
return {
/* 查询条件-请不要在queryParam中声明非字符串值的属性 */
queryParam: {},
/* 数据源 */
dataSource:[],
/* 分页参数 */
ipagination:{
current: 1,
pageSize: 10,
pageSizeOptions: ['10', '20', '30'],
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
showSizeChanger: true,
total: 0
},
/* 排序参数 */
isorter:{
column: 'createTime',
order: 'desc',
},
/* 筛选参数 */
filters: {},
/* table加载状态 */
loading:false,
/* table选中keys*/
selectedRowKeys: [],
/* table选中records*/
selectionRows: [],
/* 查询折叠 */
toggleSearchStatus:false,
/* 高级查询条件生效状态 */
superQueryFlag:false,
/* 高级查询条件 */
superQueryParams: '',
/** 高级查询拼接方式 */
superQueryMatchType: 'and',
}
}
定义数据源以及分页等配置后 给数据源赋值
这个是导入后默认会执行created
,
created() {
if(!this.disableMixinCreated){
console.log(' -- mixin created -- ')
this.loadData();
//初始化字典配置 在自己页面定义
this.initDictConfig();
}
}
loadData方法
loadData(arg) {
if(!this.url.list){
this.$message.error("请设置url.list属性!")
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1;
}
var params = this.getQueryParams();//查询条件
this.loading = true;
//this.url.list就是我们读取的数据源的后台地址
getAction(this.url.list, params).then((res) => {
if (res.success) {
//update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
this.dataSource = res.result.records||res.result;
if(res.result.total)
{
this.ipagination.total = res.result.total;
}else{
this.ipagination.total = 0;
}
//update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
}
if(res.code===510){
this.$message.warning(res.message)
}
this.loading = false;
})
},
第二，点击添加执行流程
在我们的表格上方会有新增按钮
<!-- 操作按钮区域 -->
<div class="table-operator">
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
<a-button type="primary" icon="download" @click="handleExportXls('全国地区代码表')">导出</a-button>
<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcelArea">
<a-button type="primary" icon="import">导入</a-button>
</a-upload>
<!-- 高级查询区域 -->
<j-super-query :fieldList="superFieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
<a-dropdown v-if="selectedRowKeys.length > 0">
<a-menu slot="overlay">
<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
</a-dropdown>
</div>
点击后执行的也是 JeecgListMixin 里的方法
handleAdd: function () {
this.$refs.modalForm.add();
this.$refs.modalForm.title = "新增";
this.$refs.modalForm.disableSubmit = false;
},
this.$refs.modalForm.add();执行的就是我们页面上引入的组件中的add方法
<tm-area-modal ref="modalForm" @ok="modalFormOk"></tm-area-modal>
tm-area-modal组件中方法 调用的是这个组件中又引入了另一个组件
add () {
this.visible=true
this.$nextTick(()=>{
this.$refs.realForm.add();
})
}
<tm-area-form ref=“realForm” @ok=“submitCallback” :disabled=“disableSubmit”>这个组件中的add
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<tm-area-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></tm-area-form>
</j-modal>
</template>
调用的是这个方法
add () {
this.edit(this.modelDefault);
},
edit (record) {
this.model = Object.assign({}, record);
this.visible = true;
}
这个时候表单就展示出来了，当我们填写完数据后进行提交时 执行流程
首先调用@ok 执行handleOk
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
switchFullscreen
@ok="handleOk"
:okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
@cancel="handleCancel"
cancelText="关闭">
<tm-area-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></tm-area-form>
</j-modal>
</template>
//执行的这个 调用的还是组件中的提交
handleOk () {
this.$refs.realForm.submitForm();
}
在<tm-area-form ref=“realForm” @ok=“submitCallback” :disabled=“disableSubmit”> 组件中
submitForm () {
const that = this;
// 触发表单验证
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let DepartUrl='';
let method = '';
let departObject={};
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
//这里进行后台交互
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
}
版权声明：本文为lf1934305268原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。