element?ui?watch?el-input賦值之后無法刪除或修改問題

更新時間：2024年02月28日 09:11:04 作者：像牛奶卻不是牛奶

這篇文章主要介紹了element?ui?watch?el-input賦值之后無法刪除或修改問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

element ui watch el-input賦值之后無法刪除或修改

在開發(fā)過程中偶然返現(xiàn)這個小問題：

watch監(jiān)聽父組件傳過來的值并給el-input賦值之后發(fā)現(xiàn)無法修改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：表單允許輸入數(shù)字和兩位小數(shù)，不足自動補0

代碼:

onkeyup="value=value.replace(/[^\d.]/g,'')"  替換掉除數(shù)字和小數(shù)點之外的字符

@blur="balanceForm.alarm_amount = $event.target.value"  解決input輸入框在使用了oninput后，v-model失效問題

<el-form label-width="120px" :model="balanceForm" :rules="balanceRules">
   <el-form-item label="設(shè)置余額預(yù)警：" 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">設(shè)置</el-button>
   </el-form-item>
</el-form>

export default {
    data() {
        var checkAmount = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('余額預(yù)警不能為空'));
            } else if (value.indexOf(".") != -1 && value.split('.').length > 2) {
                callback(new Error('請輸入正確格式，只能有一位小數(shù)點'));
            } else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
                callback(new Error('小數(shù)點后面只能有兩位'));
            } else {
                var Money = parseFloat(value).toFixed(3); // 獲取三位小數(shù)點 10.000（以10為例）也可以直接獲取兩位小數(shù)
                var MoneyResult = Money.substring(0, Money.length - 1); // 取前兩位 10.00
                var xsd = MoneyResult.toString().split("."); // 分割成數(shù)組 ["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 {
        	// 余額預(yù)警
            balanceForm: {
                alarm_amount: '',
            },
            balanceRules: {
                alarm_amount: [
                    {validator: checkAmount, trigger: 'blur'}
                ]
            }
        }
     }
}

補充: 如下寫法是不行的，number不能輸入小數(shù) 像10.12小數(shù)點后面的是輸不進去的

<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>

如果希望輸入負數(shù)，上面寫法是不行的

<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('請輸入數(shù)字'));
   } else if (value.indexOf(".") != -1 && value.split('.').length > 2) {
      callback(new Error('請輸入正確格式，只能有一位小數(shù)點'));
   } else if (value.indexOf(".") != -1 && value.split('.')[1].length > 2) {
      callback(new Error('小數(shù)點后面只能有兩位'));
   } 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：根據(jù)輸入內(nèi)容提供對應(yīng)的輸入建議，獲取上一次提交的用戶名

代碼：

<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) {
       // 調(diào)用 callback 返回建議列表的數(shù)據(jù)
       var list = []
       // this.tableData調(diào)接口獲取的列表數(shù)據(jù)，數(shù)據(jù)里面沒有value,需要添加value，回調(diào)函數(shù)返回的數(shù)據(jù)必須是[{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 不顯示及沒數(shù)據(jù)時閃一下的問題

方法一輸入建議的去抖延時設(shè)置為0 :debounce=“0”
方法二添加樣式 .inline-input { display: none; }

fetch-suggestions - 返回輸入建議的方法，僅當(dāng)你的輸入建議數(shù)據(jù) resolve 時，通過調(diào)用 callback(data:[]) 來返回它

@select - 點擊選中建議項時觸發(fā)，回調(diào)函數(shù)是選中建議項

問題3： el-cascader卡頓問題

代碼：

<el-cascader v-model="dataForm.calendarId" :options="calendarData"
	:props="{value: 'id', label: 'name'}" @visible-change="changeCascader"></el-cascader>
...
// 日歷選擇改變-> 后面可以用watch監(jiān)聽數(shù)據(jù)改變來進行操作
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();
	        })
		})
	}
}