首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element ui watch el-input赋值之后无法删除或修改

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

2024-02-28 09:07:19 作者：像牛奶却不是牛奶

这篇文章主要介绍了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();
	        })
		})
	}
}

总结

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

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