Java教程

使用 element-UI 的 el-button 时,通过点击事件获取标签内部的值

本文主要是介绍使用 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>
  }
}
这篇关于使用 element-UI 的 el-button 时,通过点击事件获取标签内部的值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!