使用 element-UI 的 el-button 時,通過點擊事件獲取標簽內部的值


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM