2023.03.17
ElementPlus
一、input自動(dòng)填充且autocomplete="off" 失效
在當(dāng)前網(wǎng)頁記住用戶名和密碼局义，添加用戶時(shí)，用戶名和密碼（字段名相同）會(huì)自動(dòng)填充
（1）readonly
在input框focus前，readonly為true就斤，記住的用戶名充边、密碼無法自動(dòng)填充庸推，點(diǎn)擊input后focus，readonly為false
（2）autocomplete="new-password"
在新版的谷歌瀏覽器支持的屬性中浇冰，在 type="password"input框加 autocomplete="new-password"
（3）css僅兼容chrome
<el-input
v-model.trim="form.password"
type="text"
class="no-autofill-pwd"
/>
.no-autofill-pwd {
:deep() .el-input__inner {
-webkit-text-security: disc;
}
}
二贬媒、validator自定義校驗(yàn)失敗
1.確保model，rules綁定正確
2.表單項(xiàng)prop肘习、表單綁定值字段名相同例如為username际乘，且rules中包含username（準(zhǔn)確性）
！3.validator的自定義校驗(yàn)函數(shù)必須放在rules定義之前井厌，否則蚓庭，console無法打印致讥，校驗(yàn)規(guī)則也不生效，不報(bào)錯(cuò)（順序性）
4.每個(gè)自定義函數(shù)if語句需要完整if...else... 邏輯，否則validator失效（完整性）
<el-form
ref="formRef"
label-width="80px"
:model="form"
:rules="rules"
require-asterisk-position="right"
>
<el-form-item
label="用戶賬戶"
prop="username"
autocomplete="off"
>
<el-input v-model.trim="form.username" />
</el-form-item>
</el-form>
const validateUsername = async (rule, value, callback) => {
console.log('rule', value, rule)
if (value) {
const { res } = await duplicateCheck(paramsOfCheck) // 異步校驗(yàn)
if (res.success) {
callback()
} else {
callback(new Error('用戶名已存在叠荠！'))
}
} else {
callback()
}
}
// validateUsername一定在rules定義之前＝咽健！请契！
const state = reactive({
formRef: null,
form: {},
rules: {
username: [{ asyncValidator: validateUsername, trigger: 'blur' }],
}
})
三、resetFields失效
1.model夏醉，ref綁定
2.el-form-item中prop與表單項(xiàng)的 v-model 保持一致
3.編輯表單
在編輯表單時(shí)爽锥，需nextTick方法中賦值，則表單初始值則為state中表單默認(rèn)值
不使用nextTick畔柔，則表單初始值為第一次點(diǎn)開編輯框時(shí)表單的賦值
4.resetFields() 是將表單項(xiàng)重置為初始值氯夷，而這個(gè)初始值是在 Vue mounted 時(shí)賦值上去的，如果在這之前對(duì)表單進(jìn)行了賦值靶擦，則初始值會(huì)改變（例如 created 時(shí)）腮考，那么后面調(diào)用 resetFields() 則不會(huì)生效（不會(huì)是定義時(shí)的空值）。
解決方法：將賦值操作定義在 this.$nextTick() 中（保證了初始值不被修改）
四玄捕、tree全部折疊踩蔚、全部展開
handleExpandAll() {
const tree = this.$refs.treeRef;
this.traverseTree(tree.store.root, (node) => {
node.expanded = true;
});
},
handleCollapseAll() {
const tree = this.$refs.treeRef;
this.traverseTree(tree.store.root, (node) => {
node.expanded = false;
});
},
traverseTree(node, callback) {
if (!node) return;
callback(node);
const children = node.root ? node.root.childNodes : node.childNodes;
if (children) {
children.forEach((child) => {
this.traverseTree(child, callback);
});
}
}
四、type='selection' 變單選
<el-table
ref="personnelTable"
:data="allEngineers"
@select="selectChange"
:header-cell-style="headerCellStyle"
>
<el-table-column type="selection" align="center" width="50" />
</table>
selectChange(e, row) {
if (this.engineerId == row.id) {
this.$refs.personnelTable.clearSelection()
this.engineerId = ''
return
}
this.engineerId = row.id
this.$refs.personnelTable.clearSelection()
this.$refs.personnelTable.toggleRowSelection(row)
},
headerCellStyle(header) {
console.log('headerRowStyle', header)
if (header.columnIndex == 0) {
return { 'z-index': '-1' }
}
},
