vue element-ui 鼠标划入table某行该行操作按钮显示与隐藏

情况1：鼠标划入table某行该行操作按钮显示与隐藏

elemenu-ui/karman-ui的table 鼠标进入某一行显示操作按钮

代码:

<kui-table
        :data="table.data"
          size="mini"
          style="margin-top: 30px"
 >
  <kui-table-column
            v-for="(item,index) in table.label"
            :key="index"
            :prop="item.prop"
            :width="item.width"
            :label="item.label"
            :align="item.align"
            :show-overflow-tooltip="true"
            :resizable="false"
    >
    </kui-table-column>
    <kui-table-column prop="isSend"  align="center" >
        <template  slot-scope="scope">
                <kui-button
                        icon="kui-icon-position"
                        size="mini"
                        class="u-btn"
                        @click="handlePass(scope.$index, scope.row)"
                >
                    直接发送
                </kui-button>
        </template>
    </kui-table-column>
</kui-table>
<style scoped lang="scss">
    .u-btn{
        display: none;
    }
    .kui-table__body tr:hover{
        .u-btn{
            display: inline;
        }
    }
</style>

要点

1. 在需要显示与隐藏的按钮上加上class=“u-btn”；
2. 在style中写入样式，我是用的自己的组件库，名字是karman-ui,所以对应的table为kui-table；如果是element-ui，对应的样式中写el-table

情况2：鼠标进入按钮区域，按钮显示与隐藏

代码2：

<kui-table-column prop="isSend"  align="center" >
    <template  >
        <div class="father">
            <kui-button
                    icon="kui-icon-position"
                    size="mini"
                    class="son"
            >
                直接发送
            </kui-button>
        </div>
    </template>
</kui-table-column>

<style scoped lang="scss">
    .father {
        background-color: rgba(12, 45, 64, 0.45);
        height: 30px;
    &:hover .son{
         display: block;  // 设置父元素hover时子元素的样式 【实现要点！！！！！】
     }
    }
    .son{
        background-color: #144b6b;
        height: 100%;
        float: left;     // 让按钮浮动在父元素上
        display: none;
    }
</style>

要点

1. 在需要显示与隐藏的按钮上加上class=“son”；
2. 在按钮的外层加上div父元素,class=“father”
3. 在style中写入样式，如代码