誉天程序员-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)
}

4.2.4. 批量删除动态展现

我们还实现了很酷炫的效果，通过v-if判断muchSelection.length数组的长度，实现是否展现批量删除按钮。数组为空就不展现，数组不为空就展现。

<el-button v-if="muchSelection.length" type="danger" size="small" @click="handleDelList">批量删除</el-button>

4.2.5. 循环删除

循环调用删除一条实现。

//批量删除const handleDelList = () => {//遍历拿到每一行，调用单个删除muchSelection.value.forEach(row=>{// indexOf获取当前行数据在数组中的索引值const index = tableData.value.indexOf(row)if(index != -1){handleDel(index, row)}})}

4.3. 转向新增

4.3.1. 新增按钮

<el-button type="primary" size="small" @click="toAdd"><el-icon class="el-icon--left"><CirclePlus /></el-icon>新增
</el-button>

4.3.2. 按钮方法

…（对象展开运算符）form.data，formInit这两个展开的对象属性会合并到 form.data 对象中，如果有相同属性名则会用 formInit 对象的对应属性值覆盖 form.data 对象的属性值。
formInit覆盖了之前旧的数据，但对象的结构未破坏，因为form.data是新对象也和form数据分开。这就解决了先去修改，再进新增时，数据回显错误的问题。
//转向新增

const toAdd = ()=>{form.data = {...form.data,...formInit		//利用init覆盖了现有数据}dialogVisible.value = truedialogType.value = 'add'
}

4.4. form数据

const formInit = {	//初始化值name: '',author: '',publishing: '',printTime: new Date()
}
let form = reactive(formInit)	//对话框表单绑定数据

4.5. 新增

4.5.1. 新增保存

新增修改复用了对话框代码就带来一个副作用，到底当前是新增还是修改呢？那我们再专门设置一个变量来判别。通过这个判别我们就可以修改对话框的标题，到底是新增还是修改了。

const dialogType = ref('add')const dialogSave = (index)=>{if(dialogType.value === 'add'){tableData.push(form.data)}else{tableData[index] = {...tableData[index],...form.data}}dialogVisible.value = false	//关闭对话框
}

4.5.2. 对话框的标题

通过三元表达式进行判别：

  <el-dialog v-model="dialogFormVisible"><template v-slot:title><span style="font-weight: bold;"><el-icon><ElementPlus /></el-icon>{{dialogType.value==='update'?'修改':'新增'}}书籍管理</span></template>

4.6. 修改

4.6.1. 问题

修改较为复杂，会遇到两个问题：
1）因为修改分为两个过程，打开修改的对话框，点击对话框中的确认按钮。index是传递给打开抽屉的方法handleEdit，而抽屉表单确认是方法confirmClick。它们之间断开了，参数就无法传递。而我们在表单确认时，要去知道具体修改的是哪一条，这怎么办呢？
解决办法：加个公用变量curIndex，这样我们在handleEdit时设置，在confirmClick就可以调用了。
2）修改时如果直接使用form.value=row，进行处理。当我们修改表单值时，页面的值也会随之修改。这是响应式对象的缺点，因为它们是一份引用，所以一个变，其它就跟着变。怎么解决呢？
解决方案：利于js提供的Oject.assign将对象内容复制，而不是引用。这样就断开了其中的关系。修改表单时，页面数据就不会同时被修改了。

4.6.2. 修改按钮

传递修改的索引值和当前行数据

<el-button @click="toEdit(scope.$index)" type="success" size="small"><el-icon><EditPen /></el-icon> 修改</el-button>

4.6.3. 按钮事件

let curIndex = ref(-1)
const toEdit = (index)=>{form.data = {		//回显数据...form.data,...tableData[index]}curIndex = index	//保留下来当前的索引值，供修改保存方式使用dialogVisible.value = truedialogType.value = 'edit'
}

4.6.4. 修改保存

const dialogSave = (index)=>{if(dialogType.value === 'add'){tableData.push(form.data)}else{tableData[index] = {...tableData[index],...form.data}}dialogVisible.value = false	//关闭对话框
}	

4.7. 日期格式转化

4.7.1. 问题

日期显示为格林威治时间，不符合中文日常习惯。

//导入日期函数库
import { format } from 'date-fns'
//配置表格列，它会自动回调这个方法，每行数据都回调，vue会传递3个参数给我们
const formatDate = (row, index, cellValue)=>{return format(cellValue, 'yyyy-MM-dd')	//调用函数库方法
}

4.8. 查询

4.8.1. 搜索框

<el-row style="padding:10px;"><div><el-button type="primary" size="small" @click="toAdd"><el-icon><CirclePlus /></el-icon> 新增</el-button><el-button v-if="multipleSelection.length" type="danger" size="small" @click="handlerMuchDel">删除多条</el-button></div><div style="padding-left:10px;"><el-input size="small" v-model="searchBookName" width="100" placeholder="按书名检索"  clearable><template #append><el-icon><Search /></el-icon></template></el-input></div><div style="padding-left:10px;"><el-input size="small" v-model="searchAuthor" placeholder="按作者检索" clearable><template #append><el-icon><Search /></el-icon></template></el-input></div>
</el-row>

4.8.2. 换数据绑定

将tableData换成filteredData：

<el-table :data="filteredData"…

4.8.3. 数据过滤

import {ref,computed} from 'vue'
…
const searchBookName = ref('')	//按书名搜索const searchAuthor = ref('')	//按书名搜索import {computed} from 'vue'	//动态计算，搜索框输入内容变化会自动触发let filterData = computed(()=>{return tableData.filter((r)=>{//并列条件return r.name.includes(searchBookName.value) && r.author.includes(searchAuthor.value)//或者条件// return r.name.includes(searchBookName.value) || r.author.includes(searchAuthor.value)})})