Element-ui组件常见问题
el-input
问题1: 表单允许输入数字和两位小数, 不足自动补0
代码:
onkeyup="value=value.replace(/[^\d.]/g,'')" 替换掉除数字和小数点之外的字符
@blur="balanceForm.alarm_amount = $event.target.value" 解决input输入框在使用了oninput后,v-model失效问题
<el-form label-width="120px" :model="balanceForm" :rules="balanceRules">
<el-form-item label="设置余额预警:" prop="alarm_amount">
<el-input
size="small"
v-model="balanceForm.alarm_amount"
autocomplete="off"
style="width: 200px;margin-right:10px"
onkeyup="value=value.replace(/[^\d.]/g,'')"
@blur="balanceForm.alarm_amount = $event.target.value"
></el-input>
<el-button type="primary" size="small" @click="onBalance">设置</el-button>
</el-form-item>
</el-form>
export default {
data() {
var checkAmount = (rule, value, callback) => {
if (value === '') {
return callback(new Error('余额预警不能为空'));
} else if (value.indexOf(".") != -1 && value.split('.').length > 2) {
callback(new Error('请输入正确格式,只能有一位小数点'));
} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
callback(new Error('小数点后面只能有两位'));
} else {
var Money = parseFloat(value).toFixed(3); // 获取三位小数点 10.000(以10为例)也可以直接获取两位小数
var MoneyResult = Money.substring(0, Money.length - 1); // 取前两位 10.00
var xsd = MoneyResult.toString().split("."); // 分割成数组 ["10", "00"]
if (xsd.length == 1) {
this.balanceForm.alarm_amount = creditResult.toString() + ".00";
}
if (xsd.length > 1) {
if (xsd[1].length == 1) {
this.balanceForm.alarm_amount = MoneyResult;
}
if (xsd[1].length > 1) {
this.balanceForm.alarm_amount = xsd[0].toString() + "." + xsd[1].toString().substring(0, 2);
}
}
callback()
}
};
return {
// 余额预警
balanceForm: {
alarm_amount: '',
},
balanceRules: {
alarm_amount: [
{validator: checkAmount, trigger: 'blur'}
]
}
}
}
}
补充: 如下写法是不行的,number不能输入小数 像10.12小数点后面的是输不进去的
<el-input
size="small"
v-model.number="balanceForm.alarm_amount"
autocomplete="off"
style="width: 200px;margin-right:10px"
onkeyup="value=value.replace(/[^\d.]/g,'')"
></el-input>
如果希望输入负数,上面写法是不行的
<el-input
size="small"
v-model.trim="balanceForm.alarm_amount"
autocomplete="off"
style="width: 200px;margin-right:10px"
></el-input>
// 验证
var checkAmount = (rule, value, callback) => {
// console.log('rule', rule, value);
// console.log('value', value);
if (value != 0 && !Number(value)) {
callback(new Error('请输入数字'));
} else if (value.indexOf(".") != -1 && value.split('.').length > 2) {
callback(new Error('请输入正确格式,只能有一位小数点'));
} else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
callback(new Error('小数点后面只能有两位'));
} else {
var Money = parseFloat(value).toFixed(3);
var MoneyResult = Money.substring(0, Money.length - 1);
var xsd = MoneyResult.toString().split(".");
// console.log('Money', Money, MoneyResult, xsd, xsd[1].length);
// if (xsd.length == 1) {
// this.balanceForm.alarm_amount = creditResult.toString() + ".00";
// }
if (xsd.length > 1) {
if (xsd[1].length == 1) {
this.balanceForm.alarm_amount = MoneyResult;
}
if (xsd[1].length > 1) {
this.balanceForm.alarm_amount = xsd[0].toString() + "." + xsd[1].toString().substring(0, 2);
}
}
callback()
}
};
问题2: 根据输入内容提供对应的输入建议,获取上一次提交的用户名
代码:
<template>
<el-dialog title="上传凭证" :visible="uploadDialogVisible" class="updata" @close="onCloseEditDialog">
<el-form
id="uploadForm"
method="post"
enctype="multipart/form-data"
:model="formData"
label-width="120px"
ref="formData"
:rules="rules">
...
<el-form-item label="开户人姓名: " prop="bank_username">
<el-autocomplete
class="inline-input"
v-model="formData.bank_username"
:fetch-suggestions="querySearch"
@select="handleSelect"
style="width:300px"
:debounce="0"
></el-autocomplete>
</el-form-item>
...
</el-form>
</template>
<script>
...
// 开户人姓名
querySearch(queryString, cb) {
// 调用 callback 返回建议列表的数据
var list = []
// this.tableData调接口获取的列表数据,数据里面没有value,需要添加value,回调函数返回的数据必须是[{value: '待选项'},{}]这种形式
if (this.tableData.length) {
list.push(Object.assign(this.tableData[0], {value: this.tableData[0].bank_username}))
// console.log('list', list);
}
cb(list);
},
// 选中下拉开户人姓名
handleSelect (item) {
// console.log('item', item);
this.formData.bank_username = item.value
}
...
</script>
解决 el-autocomplete 不显示及没数据时闪一下的问题
方法一 输入建议的去抖延时设置为0 :debounce=“0”
方法二 添加样式 .inline-input { display: none; }
fetch-suggestions - 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它
@select - 点击选中建议项时触发, 回调函数是选中建议项
问题3: el-cascader卡顿问题
代码:
<el-cascader v-model="dataForm.calendarId" :options="calendarData"
:props="{value: 'id', label: 'name'}" @visible-change="changeCascader"></el-cascader>
...
// 日历选择改变-> 后面可以用watch监听数据改变来进行操作
changeCascader() {
this.$nextTick(() => {
// 添加这段代码
const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
Array.from($el).map((item) => item.removeAttribute('aria-owns'));
});
},
问题4: el-table fixed错位问题
代码:
<el-table
:data="tableData"
v-loading="loading"
ref="multipleTable"
>
...
</el-table>
...
methods: {
getTableData() {
this.loading = true
getTableData().then(res => {
this.tableData = res.data
this.loading = false
this.$nextTick(() => {
this.$refs.multipleTable.doLayout();
})
})
}
}