使用 element-UI 的 el-button 時,通過點選事件獲取標籤內部的值
阿新 • • 發佈:2022-03-03
<el-button
type="text"
icon="glyphicon glyphicon-thumbs-up"
@click="get_val($event)">22
</el-button>
如果想要通過點選事件 get_val 獲取 22 這個數字,在函式內部要做一個判斷。
因為有 icon 引數的 el-button,在網頁上生成的 button 標籤內會有一個 i 標籤和一個 span 標籤。
用滑鼠點選時,點在數字上,是 span 標籤;點在圖示上,是 i 標籤;點在圖示和數字上面或下面,有可能是 button 標籤。
所以如果直接這樣獲取是不一定能獲取到的:
get_val (e) {
console.log(e.target)
}
需要加一個判斷
get_val (e) { if (e.target.nodeName == 'I') { // 如果標籤名是 i,拿下一個標籤 console.log(e.target.nextElementSibling) // <span>22</span> }else if (e.target.nodeName == 'BUTTON') { // 如果是 button,拿第二個子標籤 console.log(e.target.children[1]) // <span>22</span> }else { console.log(e.target) // <span>22</span> } }