查询、新增、重置按钮自带，其他按钮通过插槽自定义
hasPage参数控制是否添加分页参数，查询功能自动将page改为1
重置功能默认恢复表单初始化
行内样式表单
<template>
<!-- :label-width="labelwidth" -->
<el-form
:model="formData"
:rules="rules"
:size="size"
ref="queryForm"
:inline="inline"
class="publi-form publi-flex"
>
<div v-for="column in columns" :key="column.prop">
<el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'input'">
<!-- 普通输入框 -->
<el-input
v-model="formData[column.prop]"
:clearable="column.clearable || true"
:disabled="column.disabled || false"
:placeholder="column.placeholder"
></el-input>
</el-form-item>
<el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'select'">
<el-select
v-model="formData[column.prop]"
:placeholder="column.placeholder"
:clearable="column.clearable || true"
:disabled="column.disabled || false"
:filterable="column.filterable || false"
:multiple="column.multiple || false"
>
<el-option
v-for="(options, index) in column.options"
:label="column.optionsDefault ? options[column.optionsDefault[0]] : options"
:value="column.optionsDefault ? options[column.optionsDefault[1]] : options"
:key="column.optionsDefault ? options[column.optionsDefault[1]] : index"
></el-option>
</el-select>
</el-form-item>
<el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'cascader'">
<el-cascader
v-model="formData[column.prop]"
:placeholder="column.placeholder"
:clearable="column.clearable || true"
:disabled="column.disabled || false"
:options="column.options"
@change="handleChange"
></el-cascader>
</el-form-item>
<el-form-item :label="column.label" :prop="column.prop" v-if="column.type == 'datetimerange'">
<el-date-picker
v-model="formData[column.prop]"
:format="column.format || 'yyyy-MM-dd HH:mm:ss'"
:value-format="column.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
:type="column.rangeType || 'datetimerange'"
:range-separator="column.range || '至'"
:unlink-panels="column.unlinkPanels || false"
:start-placeholder="column.rangePlaceholder ? column.rangePlaceholder[0] : '开始时间'"
:placeholder="column.placeholder"
:end-placeholder="column.rangePlaceholder ? column.rangePlaceholder[1] : '结束时间'"
:clearable="column.clearable || true"
:disabled="column.disabled || false"
></el-date-picker>
</el-form-item>
<el-form-item
:label="column.label"
:prop="column.prop"
v-if="column.type == 'slot' && column.show == true"
>
<slot :name="column.prop"></slot>
</el-form-item>
</div>
<el-form-item class="func-btn">
<!-- 查询按钮 -->
<template v-if="queryPerm">
<el-button
type="primary"
icon="el-icon-search"
@click="queryByWord()"
v-if="hasPerm(queryStr)"
>查询</el-button
>
</template>
<template v-else>
<el-button type="primary" icon="el-icon-search" @click="queryByWord()">查询</el-button>
</template>
<!-- 新增按钮 -->
<template v-if="addPerm && addBtn">
<el-button type="success" icon="el-icon-plus" @click="add()" v-if="hasPerm(addStr)">{{
addLabel
}}</el-button>
</template>
<template v-else>
<el-button type="success" icon="el-icon-plus" @click="add()" v-if="addBtn">{{
addLabel
}}</el-button>
</template>
<!-- 重置按钮 -->
<el-button @click="onReset" v-if="resetBtn" icon="el-icon-refresh">重置</el-button>
<!-- 其他功能按钮插槽 -->
<slot name="btnSlot" :form="formData"></slot>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
columns: {
//表单配置项
type: Array,
default: () => [],
},
rules: {
//验证规则
type: Object,
default: () => {
return {};
},
},
size: {
//表单内组件尺寸
type: String,
default: 'mini',
},
resetBtn: {
//显示重置按钮
type: Boolean,
default: false,
},
addBtn: {
//显示新增按钮
type: Boolean,
default: false,
},
labelwidth: {
//label宽度
type: String,
default: '120px',
},
inline: {
//是否为行内式表单
type: Boolean,
default: true,
},
hasPage: {
//是否包含分页参数
type: Boolean,
default: true,
},
addLabel: {
type: String,
default: '新增',
},
queryPerm: {
//查询是否存在权限限制
type: Boolean,
default: false,
},
queryStr: {
//查询权限字符
type: String,
default: '',
},
addPerm: {
//新增是否存在权限限制
type: Boolean,
default: false,
},
addStr: {
//新增权限字符
type: String,
default: '',
},
},
data() {
return {
formData: {},
};
},
methods: {
handleChange(value) {
console.log(value, 454545);
},
// 查询
queryByWord() {
this.$refs['queryForm'].validate((valid)