因为最近在学VUE 也算是练手了 不说了直接上代码
<template>
<div>
<el-table
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%"
>
<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">
<el-popover trigger="hover" placement="top">
<p>书名: {
{
scope.row.name }}</p>
<p>出版社: {
{
scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{
{
scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot="header" slot-scope="scope">
<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
</template>
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, tableData)">编辑</