element ui watch el-input赋值之后无法删除或修改问题

更新时间：2024年02月28日 09:11:04 作者：像牛奶却不是牛奶

这篇文章主要介绍了element ui watch el-input赋值之后无法删除或修改问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element ui watch el-input赋值之后无法删除或修改

在开发过程中偶然返现这个小问题：

watch监听父组件传过来的值并给el-input赋值之后发现无法修改input得值需要在input里添加 @input="change($event)"

<el-input v-model="condition.name" @input="change($event)" size="small" clearable></el-input>

watch里赋值

    chemicalName: {
      handler (value) {
        this.condition.name = value
        this.onSearch()
      },
      deep: true
    }

然后在methods里写上以下方法就ok了

    change () {
      this.$forceUpdate()
    },

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();
	        })
		})
	}
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用vue编写h5公众号跳转小程序的实现代码
这篇文章主要介绍了使用vue编写h5公众号跳转小程序,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
Vue利用openlayers实现点击弹窗的方法详解
点击弹窗其实就是添加一个弹窗图层，然后在点击的时候让他显示出来罢了。本文将利用openlayers实现这一效果，快跟随小编一起学习一下吧
2022-06-06
vue如何把组件方法暴露到window对象中
这篇文章主要介绍了vue如何把组件方法暴露到window对象中，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue项目配置国际化$t('')的介绍和用法示例
这篇文章主要给大家介绍了关于vue项目配置国际化 $t('')的介绍和用法的相关资料,多语言和国际化现在已经成为一个网站或应用的必要功能之一,Vue作为一款流行的前端框架,在这方面也有着灵活的解决方案,需要的朋友可以参考下
2023-09-09
VS编译器中引用Vue3框架的实现步骤
本文主要介绍了VS编译器中引用Vue3框架的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2024-12-12
Vue开发配置tsconfig.json文件的实现
tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项,本文就来介绍一下Vue开发配置tsconfig.json文件的实现,感兴趣的可以了解一下
2023-08-08
如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)
这篇文章主要介绍了如何隐藏element-ui中tree懒加载叶子节点checkbox(分页懒加载效果)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue 简单配置公用接口地址方式
这篇文章主要介绍了Vue 简单配置公用接口地址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
uniapp实现红包动画效果代码实例(vue3)
uniapp作为一种基于Vue.js的前端框架,实现了一套代码多端运行的理念,成为了众多开发者的首选,下面这篇文章主要给大家介绍了关于uniapp实现红包动画效果的相关资料,需要的朋友可以参考下
2024-01-01
详解在Vue中有条件地使用CSS类
本篇文章主要介绍了详解在Vue中有条件地使用CSS类，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09