iview table expand 单击当前行控制

 1、添加元素与js

 <Table :columns="thList" :data="list" @on-row-click="toggleTableExpand" ref="tableExpand"></Table>
 
 // 源码里有toggleExpand方法,可以直接使用
 methods:{
    toggleTableExpand(row, index) {
      this.$refs.tableExpand.toggleExpand(index);
    },
 }

2、如果默认元素(箭头)点击无效,可添加样式覆盖
td.expandBox .ivu-table-cell{
  position: relative;
  &::after{
    position: absolute;
    content: '';
    top: 0;
    left:0;
    height: 100%;
    width:100%;
    z-index: 9;
  }
  &:hover{
    .ivu-icon-ios-arrow-forward{
      color:#1d7cd0;
      border-color:#1d7cd0;
     }
  }
}

 

 
posted @ 2019-05-28 12:00  CorderBob  阅读(3392)  评论(0编辑  收藏  举报