vue 组件Table组件鼠标显示效果

vue  table组件  element-ui库

效果如下：

 

代码附上：脚手架粘贴即可！

<template>
  <div>
    <h1>表单组件</h1>
    <div class="table">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
            <!-- <div slot-scope="scope">{{ scope.row.createTime | time }}</div> -->
          </el-table-column>
          <el-table-column prop="date" label="日期1" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
            <!-- 提示操作 -->
            <div slot-scope="scope">
              <el-tooltip placement="top-start">
                <div slot="content">
                  <pre>{{ scope.row.name }}</pre>
                </div>
                <span class="Name">{{ scope.row.name }}</span>
              </el-tooltip>
            </div>
          </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="address" label="地址1"> </el-table-column>
          <el-table-column prop="address" label="地址2"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <a @click="$touter.push('' + scope.row.id)">查看</a>
              <el-popover
                placement="bottom"
                width="200"
                target="click"
                v-model="scope.row.popover"
              >
                <p>删除这条数据</p>
                <div>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="scope.row.popover = false"
                    >取消</el-button
                  >
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleDelete(scope.row)"
                    >确定</el-button
                  >
                </div>
                <a slot="reference" class="table-scope">删除</a>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页脚 -->
        <el-pagination
          layout="prev, pager, next, jumper, sizes, total"
          :total="totalCount"
          :page-size.sync="pagination.pageSize"
          :current-page.sync="pagination.pageNo"
          :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
          @size-change="onSizeChange"
          @current-change="onPageChange"
        ></el-pagination>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      pagination: {
        pageSize: 10,
        pageNo: 1,
      },
      totalCount: 20,
      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 弄",
        },
      ],
    };
  },
  methods: {
    onSizeChange(pageSize) {
      this.pagination.pageNo = 1;
      this.pagination.pageSize = pageSize;
      this.fetch();
    },
    onPageChange(pageNo) {
      this.pagination.pageNo = pageNo;
      this.fetch();
    },
  },
};
</script>