項(xiàng)目需求: el-table帶行編輯。
開發(fā)中遇到一旦行編輯過多臣疑，頁面就變得奇卡無比讯沈。然后就做了假的輸入框代替缺狠，后來又遇到需要二次點(diǎn)擊才能正常聚焦挤茄，客戶很不滿意。改改改歇终。练湿。。
思路：點(diǎn)擊模擬框時(shí)自動(dòng)聚焦
// 在main.js中注冊一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
inserted: function (el) {
console.log(7,el)
// 聚焦元素
setTimeout(() => {
console.log(el.querySelector('input'))
el.focus()
el.querySelector('input').focus()
}, 100);
}
})
<el-input v-focus />
沒問題崖飘，輸入框自動(dòng)聚焦了朱浴，然后下拉框還是不行项乒。然后網(wǎng)上搜索了一下，使用this.$refs.select.toggleMenu()，確實(shí)能自動(dòng)展出了频鉴，但是有多個(gè)下拉框就有問題了栓辜，錯(cuò)位了
image.png
后來參考了vue el-select自動(dòng)展開和高度設(shè)置_automatic-dropdown-CSDN博客
<el-input v-focus :automatic-dropdown="true" />
image.png
終于搞定了，不容易啊垛孔，記錄下藕甩。
