el-input獲取焦點 input輸入框爲空時高亮 el-input值非法時

問題重述
前端主要框架爲Vue.js，在頁面使用組件庫element-ui的el-input、el-select、el-autocomplete等元件時，想要在表單驗證爲空時，使空值的元件獲取焦點高亮。效果以下圖所示：

---

解決思路
經過查看網上的相關問題和官方文檔，發如今Vue中，能夠經過$ref.ref屬性名來訪問DOM元素。又經過查看HTML的說明文檔得知，經過focus()方法能夠獲取DOM的焦點。So，爲了獲取組件只須要在組件中添加ref屬性，而後使用this.$refs.ref屬性名.focus();便可實現獲取某一特定DOM元素的焦點。
代碼示例：

<el-input
    ref="test"
    v-model.trim="testModel">
</el-input>

if(this.testModel === ''){
    this.$refs.test.focus();
}