誉天程序员-2301-3-day08

4. 书籍管理实现CURD

这个结构比较复杂，是有一套复杂的机制，注意它们之间的关系和控制实现。
 新增和修改怎么复用对话框
 对话框中的数据，表格中展现的数据，临时记录正在操作的数据统一联动起来
 单条删除怎么传递数据，多条删除怎么传递数据
 修改怎么传递当前修改记录的索引值index

4.1. 删除

4.1.1. 增加插槽

Vue给我们提供了一个很好用的功能template插槽，可以自动为我们传递一些对象，如row行对象，这样我们就无需自己去写代码，直接拿过来用即可。
官网地址：
https://element-plus.gitee.io/zh-CN/component/table.html#table-column-插槽
https://element-plus.gitee.io/zh-CN/component/table.html#自定义列模板
插槽传递当前行数据，自动封装到row中，我们直接使用row对象即可：

<el-table-column label="操作" width="200">
	<template #default="scope">
		…
	</template>
</el-table-column>

4.1.2. 删除按钮

注意：row代表的是业务数据，所以并不包含index，而插槽额外提供了属性$index代表索引值。定义的写法有点与众不同，采用了es6的语法，前面加个$，使用时需要注意。

<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">
	<el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>删除
</el-button>

4.1.3. 删除事件

splice从数组中移除元素

//根据槽传过来的row当前行数据，获取其数组的索引位置，调用splic方法进行删除
	const handleDel = (index, row)=>{
   
   
		//从数组中删除索引起始的位置，删除1条
		tableData.value.splice(index, 1)
	}

4.2. 批量删除

4.2.1. 增加选择列

之前我们已经加了多选列，type=”selection”，用其可以记录下用户选中的记录

<el-table-column prop="id" type="selection" width="55" />

4.2.2. 触发的事件

增加选择时触发的selection-change事件

<el-table :data="tableData" border @selection-change="handleSelectionChange">

4.2.3. 选择事件

多选按钮，ElementPlus框架会自动把选中的行存放到muchSelection数组中。

const muchSelection = ref([])	//用于记录多选选中的集合
//表格的多选事件，val保存了被选中的行的
const handleSelectionChange = (val)=>{
   
   
	muchSelection.value = val
	//console.log(muchSelection.value)</