为什么不hover呢?点击的话你参考下面代码:
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%" @row-click="rowClick">
<el-table-column label="日期" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
<div v-show="showBtn == scope.row.id" style="display: inline-block;margin-left: 20px;">
<el-button size="mini" type="primary" icon="el-icon-edit" circle></el-button>
<el-button size="mini" type="success" icon="el-icon-check" circle></el-button>
<el-button size="mini" type="danger" icon="el-icon-delete" circle></el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
showBtn: -1,
tableData: [{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
},
methods: {
rowClick(row, column, event) {
this.showBtn = row.id;
}
}
};
</script>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…