1. 通过作用域插槽来实现表单自定义按钮的效果

 分析需求

1. 首先操作列并不对应任何的数据结构，所以想要实现在列表中操作列增加按钮来实现编辑或者删除，必须要拿到对应的Id,才能进行数据操作。

2. 所以要拿到对应的Id，必须通过使用作用域插槽来实现操作列的渲染

2. 实现步骤

2.1 定义作用域插槽步骤

• 定义template 结构，在template 结构中定义 v-slot="scope" 并定义一个 scope接收
• 通过 scope.row 获取到当行前的数据
• 例如：

•   如下图，通过作用域的方式取到当前列的数据了，那就可以访问当前列id或者其他属性来进行增加或者删除的操作了。

 2.2 作用域定义完成，并且成功取到数据后，接下来在 template 内部放置一些按钮，从而渲染出修改，删除等功能

2.2.1 首先去按钮复制按钮例子进行改造

 2.2.2 页面修改

 2.2.3 如果按钮过大，参数官网Button 属性 来修改按钮大小

 Button 按钮 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/button.html#button-%E5%B1%9E%E6%80%A7

2.2.4 代码中添加属性进行修改按钮大小

 2.2.5 修改完成后页面效果

 2.2.6 如果出现操作那一列放不下三个按钮的情况

 2.2.7  只需要为操作列，手动添加一个宽度（width）即可。width 按照需求添加px

 2.3 给个别图标添加鼠标悬浮提示效果

• 有些按钮通过图标就能判断按钮的作用。有些则需要给按钮适当添加鼠标悬浮提示效果

 2.3.1 如何给按钮添加提示

• 使用Tooltip 文字提示 组件

2.3.2  复制粘贴官网事例代码，进行修改

1. effect 代表提示内容的背景色
2. content 表示提示的内容
3. placement 表示显示的位置

 2.3.3 接着导入 el-tooltip

 2.3.4 添加完成后效果

2.3.5  如上图，当需要点击上一个按钮时，由于鼠标悬停在提示框上面，无法自动隐藏掉。所以接下来，通过一个属性来设置，让它自动隐藏掉。

• Tooltip 组件有一个属性，叫做 enterable 它的默认值是true 。就是鼠标如果悬停在提示框的内容中，则不会自动隐藏。关闭该属性即可。

 2.3.6 修改页面代码

 2.3.7 最后页面效果

3. 组件代码

3.1 用户组件 Users.vue

<template>
  <div>
    <!-- 面包屑导航区域 -->

  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片视图区域 -->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 搜索与添加区域 -->
          <el-input placeholder="请输入内容" >
          <template #append>
            <el-icon><search /></el-icon>
          </template>
          </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary">添加用户</el-button>
      </el-col>
    </el-row>
    <!-- 用户列表区域  -->
    <el-table :data="userlist" border stripe>
      <el-table-column type="index"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="电话" prop="mobile"></el-table-column>
      <el-table-column label="角色" prop="role_name"></el-table-column>
      <el-table-column label="状态" prop="mg_state">
        <template v-slot="scope">
          <el-switch v-model="scope.row.mg_state" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px">
        <template v-slot="scope">
          <!-- 修改按钮 -->
        <el-button type="primary" v-model="scope.row.Id" size="mini"><el-icon><edit /></el-icon></el-button>
        <!-- 删除按钮 -->
        <el-button type="danger" size="mini"><el-icon><delete /></el-icon></el-button>
        <!-- 分配角色按钮 -->
        <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
          <el-button type="warning" size="mini"><el-icon><setting /></el-icon></el-button>
       </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  </div>
</template>

<script >
export default {
  data () {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: '', // 查询参数
        pagenum: 1, // 当前页码
        pagesize: 2 // 每页显示条数
      },
      // 用户列表
      userlist: [],
      // 总数据条数
      total: 0
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    async getUserList () {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })
      if (res.meta.status !== 200) return this.$message.error('获取用户列表失败')
      this.userlist = res.data.users
      this.total = res.data.total
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

3.2 element.js

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElMessage,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElMenu,
  ElSubmenu,
  ElMenuItem,
  ElIcon,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElCard,
  ElCol,
  ElTableColumn,
  ElTable,
  ElSwitch,
  ElTooltip
} from 'element-plus'

import {
  Location,
  Menu as IconMenu,
  Search,
  Edit,
  Delete,
  Setting
} from '@element-plus/icons'

import {
  ArrowRight
} from '@element-plus/icons-vue'

export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.use(ElContainer)
  app.use(ElHeader)
  app.use(ElAside)
  app.use(ElMain)
  app.use(ElMenu)
  app.use(ElSubmenu)
  app.use(ElMenuItem)
  app.use(ElIcon)
  app.use(ElBreadcrumb)
  app.use(ElBreadcrumbItem)
  app.use(ElCard)
  app.use(ElCol)
  app.use(ElTable)
  app.use(ElTableColumn)
  app.use(ElSwitch)
  app.use(ElTooltip)
  app.component('location', Location)
  app.component('iconMenu', IconMenu)
  app.component('arrowRight', ArrowRight)
  app.component('search', Search)
  app.component('edit', Edit)
  app.component('delete', Delete)
  app.component('setting', Setting)
  app.config.globalProperties.$message = ElMessage
}

 以上内容出自 【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=48