美文网首页
elementui table组件 数形数据 点击行 展开数据

elementui table组件 数形数据 点击行 展开数据

作者: 混水妹妹 | 来源:发表于2020-12-30 16:20 被阅读0次
    image.png
    https://element.eleme.cn/#/zh-CN/component/table
    elemenui默认是点击红包展开箭头展开行,那么当leader要求你点击一行 就要展开数据了呢
    直接上代码!
    在封装的组件(子组件)那设置方法
      // 点击行 展开树形表格
        bindTableOpenHandler (elRef) {
          const tbody = elRef.getElementsByTagName('tbody')[0]
          const trs = tbody.getElementsByTagName('tr')
          const arrTrs = Array.from(trs)
          for (let i = 0; i < arrTrs.length; i++) {
            const icon = arrTrs[i].querySelector('.el-table__expand-icon')
            if (arrTrs[i].style.display !== 'none') {
              arrTrs[i].onclick = () => {
                icon && icon.click()
              }
            }
          }
        }
    

    父组件 渲染表格数据完成后 调用

     this.$nextTick(()=>{
       this.$refs.treeTable.bindTableOpenHandler(this.$refs.treeTable.$el) // 点击表格行展开树形表格
     })
    

    相关文章

      网友评论

          本文标题:elementui table组件 数形数据 点击行 展开数据

          本文链接:https://www.haomeiwen.com/subject/ycmhoktx.html