在使用Element过程的一些记录
- 主题修改
A：官网有配置主题的页面可以配置后下载使用element.eleme.cn/#/zh-CN/the…
B：自定义样式修改 使用/deep/加Element元素样式即可自定义修改
代码语言：javascript复制 /deep/.el-input__inner {
border: 1px solid #b4b4b4;
box-shadow: 1px 1px 3px #ddd inset;
}- Element组件功能修改，例如在输入框中加入输入行为的限制只允许输入数字，或者其他应用场景搜索加载等等，建议使用方式自定义指令
// 金额字段只能输入两位小数
// 使用方式name为绑定的表单节点名称
// v-Number="{set:this,name:'form.table.xx'}"
// 代码关键点dom值改变之后手动递归给之前的表单model再赋值
Vue.directive('Number2', {
inserted: function (el, binding, vnode) {
el.querySelectorAll('.el-input__inner')[0].addEventListener(
'keyup',
function (event) {
var dom = event.currentTarget
dom.value = dom.value
.replace(/[^d^.] /g, '')
.replace('.', '$#$')
.replace(/./g, '')
.replace('$#$', '.')
if (dom.value.indexOf('.') > -1) {
var arry = dom.value.split('.')
if (arry[1].length > 2) {
arry[1] = arry[1].substr(0, 2)
}
}
var str = arry.join('.')
dom.value = str
let keyArry = binding.value.name.split('.')
let len = 0
let lenArry = keyArry.length - 1
function match (obj) {
if (len < lenArry) {
len = len 1
match(obj[keyArry[len - 1]])
} else if (len === lenArry) {
obj[keyArry[len]] = dom.value
}
}
match(binding.value.set)
}
)
}
})- Element表单校验中嵌套自定义组件的数据绑定与校验
// 父组件中使用场景中的数据绑定与数据校验
<el-form-item label="对象姓名">
<Associate v-model="form.table.xx" prop="table.xx"></Associate>
</el-form-item>
rules:{
table:{
xx: [
{
required: true,
message: '请输入xxx',
trigger: 'change'
}
}
}
//子组件内部封装（联想输入查询的封装）
<template>
<div class="binding">
<div class="bindingbtn el-input--mini">
<input v-model="value"
@input="changeQuery"
class="form-width el-input__inner" />
</div>
<div v-show="isshow"
class="donwnContent">
<ul class="list">
<li v-for="(item,index) in list"
:key=index
class="item downList"
@click.stop="change(item)">{{item.label}}</li>
</ul>
</div>
</div>
</template>
<script>
import { debounce } from 'lodash'
import { SOLIDER_42 } from '@/api/xx.js'
export default {
name: 'Associate',
props: ['Object', 'isCheck', 'value'],
model: {
prop: 'Object',
event: 'changeValue'//通过当前这个事件完成数据子组件到父组件的双向绑定
},
data () {
return {
isInit: false,
isshow: false,
falgDown: true,
list: []
}
},
methods: {
/**
* @name: change
* @description: 点击联想下拉选项改变父组件中的model
* @param:
* @return:
*/
change (Object) {
this.value = Object.name
this.$emit('changeValue', Object.detail)
//配置父组件中的校验信息使用基于elment中已经封装好的事件机制
this.$parent.$emit('el.form.change')
this.isshow = false
},
/**
* @name: changeQuery
* @description: 输入时触发查询
* @param:
* @return:
*/
changeQuery: debounce(
function () {
this.isshow = true
let reqInfo = {
msg: {
fuzzySearch: this.value
}
}
var self = this
if (this.falgDown) {
SOLIDER_42(reqInfo).then(response => {
if (response.length > 0) {
self.list = response
} else {
self.list = [{ name: '', label: '暂无数据', 'detatl': {} }]
}
})
} else {
this.falgDown = true
}
}, 500
)
},
created () {
//事件委托机制，点击非当前区域收起下拉框
var self = this
window.addEventListener('click', function (event) {
console.log(event.target)
if (event.target.className.indexOf('downList') === -1) {
self.isshow = false
}
})
}
}
</script>
<style lang="scss" scoped>
</style>- Element中数据循环校验循环校验
// 核心代码 prop 进行循环的索引匹配并且:rules 单独写在每一个item中
<el-row type="flex"
align="middle"
:gutter="10"
v-for="(item, index) in form.list"
:key="index">
<el-col>
<el-form-item label="申请人"
:prop="'list.' index '.xx'"
:rules="rules.flowApproves.xx">
<el-input v-model="item.x"></el-input>
</el-form-item>
</el-col>
</el-row>- Element骚操作，修改Elemnet源码匹配自定义业务，例如Element穿梭框，改成符合自己业务的搜索查询并且执行下拉加载。实现方式，把Element源码从git上面下载下来，拷贝进入自己的工程，编译打包，我好坏啊哈哈
