element 点击行 在当前行出现文字

Question

element 点击行 在当前行出现这个红框，各位大神，这个如何实现

Answer 1

为什么不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>