vxe-grid 实现配置式form搜索条件 & form搜索条件框可折叠 & 配置式table
效果图
代码
<template>
<div class="app-container">
<vxe-grid ref='xGrid' v-bind="gridOptions" v-if="tableHeight" :height="tableHeight">
<template #billDate="{ data }">
<el-date-picker v-model="data.billDate" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="单据开始日期" end-placeholder="单据结束日期"/>
</template>
<template #reconciliationTime="{ data }">
<el-date-picker v-model="data.reTime" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
</template>
<template #fromButton="{ data }">
<el-button @click="handleQuery" icon="el-icon-search" type="primary"
v-hasPermi="['synergy:reconciliation:list']">搜索
</el-button>
<el-button @click="resetQuery" icon="el-icon-refresh">重置</el-button>
</template>
<template #operate="scope">
<el-button v-if="scope.row.auditState !== '2'" type="text" v-hasPermi="['synergy:reconciliation:add']"
@click="editEvent(scope.row)" icon="el-icon-edit">修改
</el-button>
<el-button v-if="scope.row.auditState !== '2'" type="text" v-hasPermi="['synergy:reconciliation:add']"
@click="removeRowEvent(scope.row)" icon="el-icon-delete">删除
</el-button>
</template>
<template #toolbar_buttons>
<el-row class="mb8" align="middle" type="flex" :gutter="10">
<el-col :span="20">
<el-row type="flex">
<el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
<el-menu-item v-for="item in menus" :key="item.key" :index="item.key">
{{ item.name }} {{ item.count ? `(${item.count})` : '' }}
</el-menu-item>
</el-menu>
<el-radio v-model="radio" label="header" style="margin-top: 8px;margin-left: 5px">表头</el-radio>
<el-radio v-model="radio" label="body" style="margin-top: 8px;margin-left: -20px">表头+表体</el-radio>
</el-row>
</el-col>
<el-col :span="4" justify="right" style="display: flex;justify-content: flex-end;margin-right: 15px">
<el-button @click="insertEvent(0)" icon="el-icon-plus" plain type="primary"
v-hasPermi="['price:just:add']">新增
</el-button>
<el-button v-if="removeButton" @click="removeEvent(false)" icon="el-icon-delete" plain
type="danger" v-hasPermi="['price:just:edit']">删除
</el-button>
</el-col>
</el-row>
</template>
</vxe-grid>
<pagination :limit.sync="pageSize" :page.sync="pageNum" :total="total"
@pagination="getList" v-show="total > 0"/>
</div>
</template>
data定义
gridOptions: {
id: 'full_edit_1', //storage需要
keepSource: true,//编辑状态下的还原需要
border: true,
loading: false,
align: "center",
stripe: true,
printConfig: {},
exportConfig: {},
rowConfig: {
isHover: true//高亮显示
},
formConfig: {
titleWidth: 80,
titleAlign: 'right',
items: [],
data: {}
},
columnConfig: {
resizable: true //是否启用列宽调整
},
customConfig: {
storage: true, //是否启用 localStorage 本地保存
immediate: true,
showFooter: false
},
toolbarConfig: {
refresh: {queryMethod: this.handleQuery},
slots: {
buttons: 'toolbar_buttons'//自定义工具栏按钮
}
},
editConfig: {
trigger: 'dblclick',
enabled: true,
mode: 'row',
showStatus: true //只对 keep-source 开启有效，是否显示单元格新增与修改状态
},
sortConfig: {
trigger: 'cell',//触发方式
remote: true //所有列是否使用服务端排序，如果设置为 true 则不会对数据进行处理
},
filterConfig: {
remote: true
},
//右击菜单
menuConfig: {
body: {}
},
importConfig: {
remote: true,
importMethod: this.importMethod,
types: ['xlsx'],
modes: ['insert']
},
checkboxConfig: {
labelField: '',
reserve: true,
highlight: true,
range: true
},
//列
columns: [],
//较验规则
editRules: {},
data: []
}
created() {
this.gridOptions.menuConfig.body = constant.menuConfig;
this.getColumns();//请求tableConfig配置项数据
this.priceJustStatic()
},
methods: {
getColumns() {
this.gridOptions.loading = true
getInfoByBusiCode("请求配置项数据").then(res => {
if (res.code === 200) {
this.gridOptions.columns = JSON.parse(res.data.columns);
this.gridOptions.formConfig.items = JSON.parse(res.data.formConfig);
this.gridOptions.editRules = JSON.parse(res.data.rules);
this.handleQuery();
} else {
this.gridOptions.loading = false;
this.$modal.msgError("获取表数据失败，请重试");
}
});
},
getList() { //获取table列表数据
this.gridOptions.loading = true
const params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
form: this.gridOptions.formConfig.data //获取from搜索条件数据
}
getInfoList(params).then(res => {
this.gridOptions.loading = false;
if (res.code === 200) {
this.gridOptions.data = res.rows;
this.total = res.total;
}
})
},
handleQuery() {
this.pageNum = 1;
this.getList();
},
}
//from 配置
[{
"field": "pId",
"title": "标题",
"span": 8,
"itemRender": {},
"slots": {
"default": "pId"
}
}, {
"field": "billCode",
"title": "单据号",
"span": 8,
"itemRender": {
"name": "VxeInput",
"props": {
"placeholder": "请输入单据号"
}
}
}, {
"field": "sType",
"title": "标题",
"span": 8,
"folding": true, //开启折叠
"itemRender": {},
"slots": {
"default": "sType"
}
}, {
"field": "Time",
"title": "日期",
"span": 12,
"folding": true,//开启折叠
"itemRender": {},
"slots": {
"default": "Time"
}
}, {
"span": 24,
"align": "center",
"collapseNode": true,//折叠终止
"itemRender": {},
"slots": {
"default": "fromButton"
}
}]
//table 配置
[{
"type": "checkbox",
"width": "50",
"fixed": "left"
}, {
"type": "seq",
"title": "序号",
"visible": true,
"width": "80"
}, {
"field": "id",
"title": "ID",
"visible": false,
"width": "60",
"fixed": "left"
}, {
"field": "remark",
"title": "备注",
"visible": true,
"width": "80",
"slots": {
"default": "remark"
}
}, {
"title": "操作",
"width": "150",
"fixed": "right",
"slots": {
"default": "operate"
}
}]
原文地址：https://blog.csdn.net/cimbala/article/details/140499757
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！