长沙做网站的公司哪家最好,深圳网站建设骏域网站建设,自学ui设计需要多久,爱名网22自助网站建设4. 书籍管理实现CURD
这个结构比较复杂#xff0c;是有一套复杂的机制#xff0c;注意它们之间的关系和控制实现。 新增和修改怎么复用对话框 对话框中的数据#xff0c;表格中展现的数据#xff0c;临时记录正在操作的数据统一联动起来 单条删除怎么传递数据是有一套复杂的机制注意它们之间的关系和控制实现。 新增和修改怎么复用对话框 对话框中的数据表格中展现的数据临时记录正在操作的数据统一联动起来 单条删除怎么传递数据多条删除怎么传递数据 修改怎么传递当前修改记录的索引值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操作 width200template #defaultscope…/template
/el-table-column4.1.2. 删除按钮
注意row代表的是业务数据所以并不包含index而插槽额外提供了属性 i n d e x 代表索引值。定义的写法有点与众不同采用了 e s 6 的语法前面加个 index代表索引值。定义的写法有点与众不同采用了es6的语法前面加个 index代表索引值。定义的写法有点与众不同采用了es6的语法前面加个使用时需要注意。
el-button typedanger sizesmall clickhandleDel(scope.$index, scope.row)el-icon classel-icon--leftCircleCloseFilled //el-icon删除
/el-button4.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 propid typeselection width55 /4.2.2. 触发的事件
增加选择时触发的selection-change事件
el-table :datatableData border selection-changehandleSelectionChange4.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-ifmuchSelection.length typedanger sizesmall clickhandleDelList批量删除/el-button4.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 typeprimary sizesmall clicktoAddel-icon classel-icon--leftCirclePlus //el-icon新增
/el-button4.3.2. 按钮方法
…对象展开运算符form.dataformInit这两个展开的对象属性会合并到 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-modeldialogFormVisibletemplate v-slot:titlespan stylefont-weight: bold;el-iconElementPlus //el-icon{{dialogType.valueupdate?修改:新增}}书籍管理/span/template4.6. 修改
4.6.1. 问题
修改较为复杂会遇到两个问题 1因为修改分为两个过程打开修改的对话框点击对话框中的确认按钮。index是传递给打开抽屉的方法handleEdit而抽屉表单确认是方法confirmClick。它们之间断开了参数就无法传递。而我们在表单确认时要去知道具体修改的是哪一条这怎么办呢 解决办法加个公用变量curIndex这样我们在handleEdit时设置在confirmClick就可以调用了。 2修改时如果直接使用form.valuerow进行处理。当我们修改表单值时页面的值也会随之修改。这是响应式对象的缺点因为它们是一份引用所以一个变其它就跟着变。怎么解决呢 解决方案利于js提供的Oject.assign将对象内容复制而不是引用。这样就断开了其中的关系。修改表单时页面数据就不会同时被修改了。
4.6.2. 修改按钮
传递修改的索引值和当前行数据
el-button clicktoEdit(scope.$index) typesuccess sizesmallel-iconEditPen //el-icon 修改/el-button4.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 stylepadding:10px;divel-button typeprimary sizesmall clicktoAddel-iconCirclePlus //el-icon 新增/el-buttonel-button v-ifmultipleSelection.length typedanger sizesmall clickhandlerMuchDel删除多条/el-button/divdiv stylepadding-left:10px;el-input sizesmall v-modelsearchBookName width100 placeholder按书名检索 clearabletemplate #appendel-iconSearch //el-icon/template/el-input/divdiv stylepadding-left:10px;el-input sizesmall v-modelsearchAuthor placeholder按作者检索 clearabletemplate #appendel-iconSearch //el-icon/template/el-input/div
/el-row4.8.2. 换数据绑定
将tableData换成filteredData
el-table :datafilteredData…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)})})
