vue element-ui 鼠标悬停时table该行操作按钮显示与隐藏

<template>
  <el-table :data="tableColumns" border >
    <el-table-column type="index" label="序号">
    </el-table-column>
    <el-table-column label="国家" prop="country_name"></el-table-column>
    <el-table-column label="">
      <template>
        //将要显示隐藏的操作放置于此
        <div class="operation_show">
          <el-button type="">编辑</el-button>
          <el-button type="">删除</el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'TableColumn',
  data () {
    return {
      tableColumns: [
        { country_name: '中国' },
        { country_name: '朝鲜' },
        { country_name: '俄罗斯' }
      ]
    }
  }
}
</script>

//显示隐藏所需css
<style scoped>
.operation_show {
  display: none;
}
.el-table__body tr:hover > td .operation_show {
  display: block;
}
</style>