通用组件获取表单元素及其绑定的key和value
序
今天项目要求要加上通用的详情和通用的统计，并且统计随着查询条件的变动而改变（表格上方加统计），我想法试验了下，所以记录了下来。
环境
vue2 + elementUI
核心关键点
mixins混入
components组件
el-form组件
ref属性
不管是在什么样的页面下，只要上面条件符合，基本都可以用来获取查询条件参与统计。
效果如图：
实现代码：
vue
<el-form :model="queryInfo" ref="filterFormDl">
<div class="custom-filter-row">
<div class="custom-filter-col col-5">
<el-form-item label="行政区划:" prop="xzqhdm">
<el-select
size="mini"
clearable
v-model="queryInfo.xzqhdm"
placeholder="请选择行政区划"
>
<el-option
v-for="(item, index) in xzqhdmOptions"
:key="index"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
</div>
<div class="custom-filter-col col-5">
<el-form-item label="道路名称:" prop="dlmc">
<el-input
v-model="queryInfo.dlmc"
placeholder="请输入名称"
size="mini"
clearable
/>
</el-form-item>
</div>
<div class="custom-filter-col col-5">
<el-form-item label="管理单位:" prop="gldw">
<el-input
v-model="queryInfo.gldw"
placeholder="请输入管理单位"
size="mini"
clearable
/>
</el-form-item>
</div>
<div class="custom-filter-col col-5">
<el-form-item label="道路等级:" prop="dldj">
<el-select
clearable
size="mini"
filterable
v-model="queryInfo.dldj"
placeholder="请选择"
>
<el-option
v-for="item in dlInfo.dldj_options"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
</div>
<div class="custom-filter-col col-5">
<el-form-item label="养护单位:" prop="yhdw">
<el-input
v-model="queryInfo.yhdw"
placeholder="请输入养护单位"
size="mini"
clearable
/>
<!-- <el-select
style="width: 100%"
clearable
size="mini"
filterable
v-model="queryInfo.yhdw"
placeholder="请选择"
>
<el-option
v-for="item in yhdwOptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select> -->
</el-form-item>
</div>
<div class="custom-filter-col col-5">
<el-form-item label="养护等级:" prop="yhdj">
<el-select
clearable
size="mini"
filterable
v-model="queryInfo.yhdj"
placeholder="请选择"
>
<el-option
v-for="item in yhdjOptions"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
/>
</el-select>
</el-form-item>
</div>
<div class="custom-filter-col col-5">
<el-form-item>
<el-button
type="primary"
@click="initData(true)"
icon="el-icon-search"
size="mini"
>查询</el-button
>
<el-button
type="success"
@click="addData"
icon="el-icon-plus"
size="mini"
v-hasPermi="['dl_csdl:add']"
>新增</el-button
>
<el-button
type="info"
@click="downloadDl"
icon="el-icon-download"
size="mini"
v-hasPermi="['dl_csdl:export']"
>下载</el-button
>
</el-form-item>
</div>
</div>
</el-form>对于form表单绑定一定要带上ref或者id，以便能获取到这个表单，表单每一项需要绑上prop以便能区分出来key是什么。
调用
js
const box = this.$refs.filterFormDl;
_this.initStats(res.total || 0,box); // 不用管这个total核心mixins
el. <math xmlns="http://www.w3.org/1998/Math/MathML"> c h i l d r e n [ i n d e x ] . children[index]. </math>children[index].children[1].$el.className;//当前div类型
el. <math xmlns="http://www.w3.org/1998/Math/MathML"> c h i l d r e n [ i n d e x ] . children[index]. </math>children[index].children[1].value;// 当前输入框的值
el. <math xmlns="http://www.w3.org/1998/Math/MathML"> c h i l d r e n [ i n d e x ] . children[index]. </math>children[index].children[1].$parent.prop;//当前输入框绑定的key
js
import { getListStatsApi } from "@/api/zhjg";
export default {
data() {
return {
statisData: [],
}
},
methods: {
getOtherParamByForm(el) {
let inputValueArr = {};
let selectValueArr = {};
let dateValueArr = {};
for (let index = 0; index < el.$children.length; index++) {
const element = el.$children[index].$children[1].$el.className;//当前div类型 - select、input、date
const value = el.$children[index].$children[1].value;// 当前输入框的值
const type = element.split(' ')[0];
const key = el.$children[index].$children[1].$parent.prop;//当前输入框绑定的key
if (type.includes('el-input')) {
// console.log('input输入框');
if (value !== '' && value !== null && key!== undefined) {
inputValueArr[key] = value
}
}
if (element.includes('el-select')) {
// console.log('select输入框');
if (value !== '' && value !== null && key !== undefined) {
selectValueArr[key] = value;
}
}
if (element.includes('el-date')) {
// console.log('日期输入框');
if (value !== '' && value !== null && key !== undefined) {
dateValueArr[key] = value;
}
}
}
return {
input: JSON.stringify(inputValueArr),
select: JSON.stringify(selectValueArr),
date: JSON.stringify(dateValueArr)
}
},
// 获取统计所需要的参数
getStatsListParam() {
const infoMap = DETAILMAP[this.currentMenu.name];
const tableName = infoMap.tableName;
this.statisData = JSON.parse(JSON.stringify(infoMap.staticMap));
const unit = infoMap.unit;
let field = [];
let dictType = [];
this.statisData.forEach((u) => {
if (u.name) {
field.push(u.name);
}
if (u.dictType) {
dictType.push(u.dictType);
}
});
return {
field: field && field.length ? field.join(",") : "",
dictType: dictType && dictType.length ? dictType.join(",") : "",
tableName,
unit: unit,
};
},
async initStats(total, element) {
const form = this.getStatsListParam();
// 遍历表单区分出来选择框和输入框 分类并获取其值
const infoData = this.getOtherParamByForm(element);
const param = { ...form, eqParam: infoData.select, likeParam: infoData.input, dateParam: infoData.date };
let stats_info = await getListStatsApi(param);
this.statisData.forEach((u) => {
if (!u.name) {
u.types = [{ num: total, unit: form.unit }];
} else {
const obj = stats_info[u.name];
let types = [];
for (const key in obj) {
let type_obj = {
num: obj[key],
unit: key,
};
types.push(type_obj);
}
u.types = types;
}
});
},
}
}通过mixins混入这个文件，直接调用即可在需要加统计的页面进行使用。 这里还作为处理了其他的全局参数，但主要将如何获取form的key和value为主。