vue3:十三、分类管理-表格--行内按钮---行删除、批量删除实现功能实现

一、实现效果

增加行内按钮的样式效果，并且可以根绝父组件决定是否显示

增加行内删除功能、批量删除功能

二、增加行内按钮样式

1、增加视图层按钮

由于多个表格都含有按钮功能，所以这里直接在子组件中加入插槽按钮

• 首先增加表格行<el-table-column></el-table-column>
• 加入行内按钮<el-button></<el-button>
• 添加按钮图标文字

 2、样式层

由于之前设置了表头的按钮功能，设置了一些样式，会将官方提供的样式给覆盖

这是加入type后按钮的效果，发现按钮的背景色未更改为希望的效果

修改表头按钮样式增加main-btn样式

去掉原本表格内容的背景色，增加main-btn样式下的el-button的背景色和悬停效果

更改完之后效果如下，行内按钮样式已经修改完成，表头的按钮效果也修改完成

3、修改原始查询表格数据的接口名

这里这里使用的是url，但现在需要添加别的接口信息，所以将这里的url更改为list

(1)更改父页面的名称

将父页面传递的接口-查询全部表格数据，名称修改为list

(2)更改表格子组件的名称

在请求接口时，修改请求表格全部数据的名称修改为list

三、增加增删改查的接口请求

1、增加父页面的接口信息

在父页面中，写入指定接口信息

const apiUrl = {list: '/category/list', //获取列表add:'/category/add', //添加edit:'/category/edit', //编辑del:'/category/del', //删除detail:'/category/detail',//详情
}

2、接口建立

(1)分类数据删除

新建接口

写入接口路径，名称，以及请求时需要传递的参数id

新建期望

(2)分类数据修改

新建接口

新建接口：写入名称，路径，请求时需要修改的数据，修改的行id

新建期望

(3)分类数据新增

新建接口

新建接口：写入名称，路径，请求时传递的需要新增的数据