vue element-ui table在鼠标划入某一行时让该行的操作按钮显示

code：

<template>
<el-col >
  <el-form>
    <el-table
      :data="tableData"
      style="width: 95%;margin:10px auto ;">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="">
        <template slot-scope="scope">
          <el-button class="u-btn"
            size="mini"
            @click="handlePass(scope.$index, scope.row)">通过</el-button>
          <el-button class="u-btn"
            size="mini"
            type="danger"
            @click="handleReject(scope.$index, scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</el-col>
</template>

<script>
    export default {
        name: "index.vue",
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
</script>

<style lang="less" scoped>
  .u-btn{
    display: none;
  }
  .el-table__body tr:hover{
  .u-btn{
    display: inline;
  }
  }
</style>