本文针对自定义封装中的组件进行解析和学习( 使用ClazzSelectPlus字段名称来封装组件)在文章的最后展示ClazzSelectPlus文件中封装的代码
代码解析
在处理国际化的时候,首先封装一下组件,
-
:inputinner.sync="orderBaseForm[$t('orderLanguage.otherLabel.checkTemplate')]"---------将checkTemplate在orderBaseForm中定义
2. :interface='managementList'-------------调用函数managementList
在<script>中进行引入
import { managementList, } from "@/admin/index/api/basis/basicCustomer";
在data中进行定义
data() { return { managementList: managementList,} }
在/api/basis/basicCustomer路径接口中调用(调用方式各有不同)
export const managementList = (data) => { return sendReq({ queryUrl: `${config.prefixUrl.serverApi}/system/checkTemplate/search`, req: { method: 'get', data: data } }) }
3. :placeholder="$t('orderLanguage.formLabel.refCheckTemplatePlaceholder')"
$t(''):vue-i18n 数据渲染的模板语法----input输入框的文字提示
4.:show-column="[{label: '中文名称', prop: 'cnName'}, {label: '英文名称', prop: 'enName'}]"
当前标题行的文字展示-------label为中文字段,prop为接口中传过来的中文名称对应的值
5. input-key="id"
根据不同的key值来标注唯一性,id为后台传过来的主键
6. input-label="cnName"
当前对应输入在文本框中的值,即为后端传来对应的中文名称
7. @select="selectCheckTemplate"
对传来的数据数据进行过滤,在当前行只显示对应的中文名称和英文名称
selectCheckTemplate(row){ if (row) { this.orderBaseForm.checkTemplateNameCn = row['cnName']; this.orderBaseForm.checkTemplateNameEn = row['enName']; return; } this.orderBaseForm.checkTemplateNameCn = null; this.orderBaseForm.checkTemplateNameEn = null; },
效果展示
ClazzSelectPlus代码展示:
<template>
<div class="components-container">
<el-input v-if="disabled" v-model="temp" :placeholder="placeholder" suffix-icon="el-icon-search" disabled></el-input>
<el-popover v-else ref="popover" trigger="focus" v-model="visible" :placement="placement" :open-delay="5"
@after-enter="handleAfterEnter" :append-to-body="true">
<el-pagination v-if="paged" style="margin-bottom: 3px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
small
:pager-count="5"
:page-sizes="[10, 20, 50, 100]"
:page-size="defaultPageSize"
:total="total"
layout="total,prev, pager, next, jumper"
>
</el-pagination>
<el-table :data="filterGridData" :style="getInlineStyle()" :show-header="showHeader" max-height="470"
empty-text="暂无数据" fit
:header-cell-style="{background : 'rgb(230,238,250)', 'font-size': '13px', color: 'black'}"
@row-click="handleClick" @row-dblclick="handleDblClick">
<el-table-column v-for="(item,index) in showColumn" :key="index" :property="item.prop"
:label="item.label"></el-table-column>
</el-table>
<el-input v-model="temp" slot="reference" :placeholder="placeholder" @input="handleInput"
@keyup.enter.native.stop="handleEnter" @blur="handleBlur" @focus="handleFocus"
clearable @clear="clearClick"
suffix-icon="el-icon-search">
</el-input>
</el-popover>
</div>
</template>
<script>
export default {
name: "ClazzSelectPlus",
props: {
width: Number,
value: {},
placeholder: String,
dblclick: Boolean,
disabled: Boolean,
filterKey: String,
placement: {
type: String,
default: 'bottom'
},
inputKey: {
type: String,
required: true
},
inputLabel: {
type: String,
required: true
},
interface: {
type: Function,
required: true
},
clear: {
type: Function
},
showHeader: {
type: Boolean,
default: true
},
defaultQuery: {
type: Boolean,
default: true
},
allowCustom: {
type: Boolean,
default: false
},
defaultPageSize: {
type: Number,
default: 5
},
defaultQueryParam: Object,
showColumn: Array,
inputInner: String
},
watch: {
inputInner(val) {
this.temp = val
},
defaultQueryParam: {
handler(val) {
this.handleChangeDefaultParam(val)
}
}
},
data() {
return {
visible: false,
paged: false,
temp: '',
fixLabel: '',
fixQueryParam: {},
currentPage: 1,
gridData: [],
filterGridData: null,
queryParam: {
pageNum: 1,
pageSize: this.defaultPageSize
},
total: 0,
}
},
mounted() {
if (this.inputInner) {
this.temp = this.inputInner;
}
this.init()
},
methods: {
clearClick(){
this.$emit('clear', null);
},
clearData() {
this.temp = ''
this.$emit('input', null);
this.$emit('select', null);
this.$emit('update:inputInner', null);
},
init() {
let param = this.queryParam
if (this.defaultQueryParam) {
param = Object.assign(this.queryParam, this.defaultQueryParam);
}
this.getGridData(param)
},
getGridData(param) {
this.interface(param).then((res) => {
if (res && res.data && res.data.success) {
if (res.data.data.list) {
this.paged = true;
this.gridData = res.data.data.list;
this.total = res.data.data.total;
} else {
this.paged = false;
this.gridData = res.data.data;
}
this.filterGridData = this.gridData
}
this.$refs.popover.updatePopper()
});
},
getInlineStyle() {
let style = {};
if (this.width) {
style.width = this.width + 'px';
}
return style;
},
handleSizeChange(val) {
this.queryParam.pageNum = 1
this.queryParam.pageSize = val
this.getGridData(this.queryParam)
},
handleCurrentChange(val) {
this.queryParam.pageNum = val
this.getGridData(this.queryParam)
},
handleClick(row) {
if (!this.dblclick) {
this.handleSelect(row)
}
},
handleDblClick(row) {
if (this.dblclick) {
this.handleSelect(row)
}
},
handleSelect(row) {
this.temp = row[this.inputLabel];
this.fixLabel = this.temp
this.$emit('input', row[this.inputKey]);
this.$emit('select', row);
this.$emit('update:inputInner', this.temp);
this.visible = false;
},
handleInput(val) {
if (this.allowCustom) {
this.$emit('input', val);
}
if (!val) {
this.clearData();
if (this.defaultQuery) {
if (this.paged) {
if (this.filterKey) {
this.queryParam[this.filterKey] = val
}
this.queryParam.pageNum = 1
this.queryParam.pageSize = this.defaultPageSize
this.getGridData(this.queryParam)
} else {
this.filterGridData = this.gridData;
}
} else {
this.filterGridData = []
this.gridData = []
}
return;
}
if (this.showColumn && this.showColumn.length > 0) {
if (this.paged) {
this.queryParam.pageNum = 1
this.queryParam.pageSize = this.defaultPageSize
if (this.filterKey) {
this.queryParam[this.filterKey] = val
}
this.getGridData(this.queryParam)
} else {
this.filterGridData = this.gridData.filter(data => {
let bool = false
for (let i = 0; i < this.showColumn.length; i++) {
let col = this.showColumn[i]
let prop = col.prop
if (data[prop] && data[prop].indexOf(val) > -1) {
return true
}
}
});
}
}
},
handleEnter() {
if (this.filterGridData && this.filterGridData.length === 1) {
this.handleSelect(this.filterGridData[0])
}
},
handleFocus() {
this.visible = true
},
handleBlur(event) {
if (!this.allowCustom && this.fixLabel !== this.temp) {
this.clearData();
}
// let tooltip = document.getElementById(this.$refs.popover.tooltipId)
// console.log(tooltip.offsetTop)
// console.log(tooltip.offsetLeft)
// console.log(event);
// this.visible = false
},
handleChangeDefaultParam(val) {
if (val) {
if (Object.keys(val).length !== Object.keys(this.fixQueryParam).length) {
this.init();
} else {
for (let key in this.fixQueryParam) {
if (val[key] !== this.fixQueryParam[key]) {
this.init()
}
}
}
this.fixQueryParam = val
}
},
handleAfterEnter() {
this.$refs.popover.updatePopper()
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.components-container {
position: relative;
}
</style>