检察院门户网站建设成效,wordpress设置恢复,10m网站并发量,如何建设个人网站先给大家展示一下效果 Table 属性 属性名说明类型可选值默认值data显示的数据array——heightTable 的高度#xff0c; 默认为自动高度。 如果 height 为 number 类型#xff0c;单位 px#xff1b;如果 height 为 string 类型#xff0c;则这个高度会设置为 Table 的 sty…先给大家展示一下效果 Table 属性 属性名说明类型可选值默认值data显示的数据array——heightTable 的高度 默认为自动高度。 如果 height 为 number 类型单位 px如果 height 为 string 类型则这个高度会设置为 Table 的 style.height 的值Table 的高度会受控于外部样式。string / number——max-heightTable 的最大高度。 合法的值为数字或者单位为 px 的高度。string / number——stripe是否为斑马纹 tableboolean—falseborder是否带有纵向边框boolean—falsesizeTable 的尺寸stringlarge / default /small—fit列的宽度是否自撑开boolean—trueshow-header是否显示表头boolean—truehighlight-current-row是否要高亮当前行boolean—falsecurrent-row-key当前行的 key只写属性string / number——row-class-name行的 className 的回调方法也可以使用字符串为所有行设置一个固定的 className。function({ row, rowIndex }) / string——row-style行的 style 的回调方法也可以使用一个固定的 Object 为所有行设置一样的 Style。function({ row, rowIndex }) / object——cell-class-name单元格的 className 的回调方法也可以使用字符串为所有单元格设置一个固定的 className。function({ row, column, rowIndex, columnIndex }) / string——cell-style单元格的 style 的回调方法也可以使用一个固定的 Object 为所有单元格设置一样的 Style。function({ row, column, rowIndex, columnIndex }) / object——header-row-class-name表头行的 className 的回调方法也可以使用字符串为所有表头行设置一个固定的 className。function({ row, rowIndex }) / string——header-row-style表头行的 style 的回调方法也可以使用一个固定的 Object 为所有表头行设置一样的 Style。function({ row, rowIndex }) / object——header-cell-class-name表头单元格的 className 的回调方法也可以使用字符串为所有表头单元格设置一个固定的 className。function({ row, column, rowIndex, columnIndex }) / string——header-cell-style表头单元格的 style 的回调方法也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。function({ row, column, rowIndex, columnIndex }) / object——row-key行数据的 Key用来优化 Table 的渲染 在使用reserve-selection功能与显示树形数据时该属性是必填的。 类型为 String 时支持多层访问user.info.id但不支持 user.info[0].id此种情况请使用 Function。function(row) / string——empty-text空数据时显示的文本内容 也可以通过 #empty 设置string—No Datadefault-expand-all是否默认展开所有行当 Table 包含展开行存在或者为树形表格时有效boolean—falseexpand-row-keys可以通过该属性设置 Table 目前的展开行需要设置 row-key 属性才能使用该属性为展开行的 keys 数组。array——default-sort默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列order 指定默认排序的顺序object(order: ascending descending)如果只指定了 prop, 没有指定 order, 则默认顺序是 ascendingtooltip-effect溢出的 tooltip 的 effectstringdark / lightdarktooltip-options 2.2.28溢出 tooltip 的选项参见下述 tooltip 组件object请参考 tooltipobjectshow-summary是否在表尾显示合计行boolean—falsesum-text显示摘要行第一列的文本string—Sumsummary-method自定义的合计计算方法function({ columns, data })——span-method合并行或列的计算方法function({ row, column, rowIndex, columnIndex })——select-on-indeterminate在多选表格中当仅有部分行被选中时点击表头的多选框时的行为。 若为 true则选中所有行若为 false则取消选择所有行boolean—trueindent展示树形数据时树节点的缩进number—16lazy是否懒加载子节点数据boolean——load加载子节点数据的函数lazy 为 true 时生效function(row, treeNode, resolve)——tree-props渲染嵌套数据的配置选项object—{ hasChildren: hasChildren, children: children }table-layout设置表格单元、行和列的布局方式stringfixed / autofixedscrollbar-always-on总是显示滚动条boolean—falseflexible 2.2.1确保主轴的最小尺寸boolean—false Table 事件 事件名说明回调参数select当用户手动勾选数据行的 Checkbox 时触发的事件selection, rowselect-all当用户手动勾选全选 Checkbox 时触发的事件selectionselection-change当选择项发生变化时会触发该事件selectioncell-mouse-enter当单元格 hover 进入时会触发该事件row, column, cell, eventcell-mouse-leave当单元格 hover 退出时会触发该事件row, column, cell, eventcell-click当某个单元格被点击时会触发该事件row, column, cell, eventcell-dblclick当某个单元格被双击击时会触发该事件row, column, cell, eventcell-contextmenu当某个单元格被鼠标右键点击时会触发该事件row, column, cell, eventrow-click当某一行被点击时会触发该事件row, column, eventrow-contextmenu当某一行被鼠标右键点击时会触发该事件row, column, eventrow-dblclick当某一行被双击时会触发该事件row, column, eventheader-click当某一列的表头被点击时会触发该事件column, eventheader-contextmenu当某一列的表头被鼠标右键点击时触发该事件column, eventsort-change当表格的排序条件发生变化的时候会触发该事件{ column, prop, order }filter-changecolumn 的 key 如果需要使用 filter-change 事件则需要此属性标识是哪个 column 的筛选条件filterscurrent-change当表格的当前行发生变化的时候会触发该事件如果要高亮当前行请打开表格的 highlight-current-row 属性currentRow, oldCurrentRowheader-dragend当拖动表头改变了列的宽度的时候会触发该事件newWidth, oldWidth, column, eventexpand-change当用户对某一行展开或者关闭的时候会触发该事件展开行时回调的第二个参数为 expandedRows树形表格时第二参数为 expandedrow, (expandedRows | expanded) Table 方法 方法名说明参数clearSelection用于多选表格清空用户的选择—getSelectionRows返回当前选中的行toggleRowSelection用于多选表格切换某一行的选中状态 如果使用了第二个参数则可直接设置这一行选中与否row, selectedtoggleAllSelection用于多选表格切换全选和全不选—toggleRowExpansion用于可扩展的表格或树表格如果某行被扩展则切换。 使用第二个参数您可以直接设置该行应该被扩展或折叠。row, expandedsetCurrentRow用于单选表格设定某一行为选中行 如果调用时不加参数则会取消目前高亮行的选中状态。rowclearSort用于清空排序条件数据会恢复成未排序的状态—clearFilter传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数清除所有过滤器columnKeysdoLayout对 Table 进行重新布局。 当表格可见性变化时您可能需要调用此方法以获得正确的布局—sort手动排序表格。 参数 prop 属性指定排序列order 指定排序顺序。prop: string, order: stringscrollTo滚动到一组特定坐标(options: ScrollToOptions | number, yCoord?: number)setScrollTop设置垂直滚动位置topsetScrollLeft设置水平滚动位置left Table 插槽 插槽名说明子标签-自定义默认内容Table-columnappend插入至表格最后一行之后的内容 如果需要对表格的内容进行无限滚动操作可能需要用到这个 slot。 若表格有合计行该 slot 会位于合计行之上。—empty当数据为空时自定义的内容— Table-column 属性 属性名说明类型可选值默认值type对应列的类型。 如果设置了selection则显示多选框 如果设置了 index 则显示该行的索引从 1 开始计算 如果设置了 expand 则显示为一个可展开的按钮stringselection / index / expand—index如果设置了 typeindex可以通过传递 index 属性来自定义索引number / function(index)——label显示的标题string——column-keycolumn 的 key column 的 key 如果需要使用 filter-change 事件则需要此属性标识是哪个 column 的筛选条件string——prop字段名称 对应列内容的字段名 也可以使用 property属性string——width对应列的宽度string / number——min-width对应列的最小宽度 对应列的最小宽度 与 width 的区别是 width 是固定的min-width 会把剩余宽度按比例分配给设置了 min-width 的列string / number——fixed列是否固定在左侧或者右侧。 true 表示固定在左侧string / booleantrue / left / right—render-header列标题 Label 区域渲染使用的 Functionfunction({ column, $index })——sortable对应列是否可以排序 如果设置为 custom则代表用户希望远程排序需要监听 Table 的 sort-change 事件boolean / stringcustomfalsesort-method指定数据按照哪个属性进行排序仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Numberfunction(a, b)——sort-by指定数据按照哪个属性进行排序仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组则先按照第 1 个属性排序如果第 1 个相等再按照第 2 个排序以此类推function(row, index) / string / array——sort-orders数据在排序时所使用排序策略的轮转顺序仅当 sortable 为 true 时有效。 需传入一个数组随着用户点击表头该列依次按照数组中元素的顺序进行排序array数组中的元素需为以下三者之一ascending 表示升序descending 表示降序null 表示还原为原始顺序[ascending, descending, null]resizable对应列是否可以通过拖动改变宽度需要在 el-table 上设置 border 属性为真boolean—trueformatter用来格式化内容function(row, column, cellValue, index)——show-overflow-tooltip当内容过长被隐藏时显示 tooltipboolean \object 2.2.28参考表格的 tooltip-optionsalign对齐方式stringleft / center / rightleftheader-align表头对齐方式 若不设置该项则使用表格的对齐方式stringleft / center / right—class-name列的 classNamestring——label-class-name当前列标题的自定义类名string——selectable仅对 typeselection 的列有效类型为 FunctionFunction 的返回值用来决定这一行的 CheckBox 是否可以勾选function(row, index)——reserve-selection数据刷新后是否保留选项仅对 typeselection 的列有效 请注意 需指定 row-key 来让这个功能生效。boolean—falsefilters数据过滤的选项 数组格式数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。Array{text: string, value: string}——filter-placement过滤弹出框的定位string与 Tooltip 的 placement 属性相同—filter-multiple数据过滤的选项是否多选boolean—truefilter-method数据过滤使用的方法 如果是多选的筛选项对每一条数据会执行多次任意一次返回 true 就会显示。function(value, row, column)——filtered-value选中的数据过滤项如果需要自定义表头过滤的渲染方式可能会需要此属性。array—— Table-column 插槽 插槽名说明—自定义列的内容 作用域参数为 { row, column, $index }header自定义表头的内容 作用域参数为 { column, $index } 表格部分代码 !--表格数据展示 start--el-table :datadataList.list stylewidth:1300px;el-table-column propbookImg label图片 width150 aligncentertemplate #defaultscopeimg :srcscope.row.bookImg styleheight:60px//template/el-table-columnel-table-column propbookTypeId label类型 width100pxtemplate #defaultscopespan v-foritem in typeList.list :keyitem.bookTypeId{{ scope.row.bookTypeId item.bookTypeId ? item.bookTypeName : }}/span/template/el-table-columnel-table-column propbookName label名称 width100 aligncentertemplate #defaultscopediv stylecolor: #6ca7ef; v-htmlscope.row.bookName/div/template/el-table-columnel-table-column propbookPrice label价格 width100 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookWriter label作者 width60 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookPublishHouse label出版社 width80 aligncenter/el-table-columnel-table-column propbookPublishTime label出版时间 width100 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookISBN labelISBN号 width100aligncenter/el-table-columnel-table-column propbookStock label库存 width100 aligncenter/el-table-columnel-table-column propbookSalvesVolume label销量 width100 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookCatalog label目录 width60 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookDesc label简介 width60 aligncenter/el-table-columnel-table-column label操作 width200 aligncentertemplate #defaultscopeel-button round sizesmall typeprimaryclickhandleEdit(scope.$index, scope.row)修改/el-buttonel-button round sizesmall typedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table!--表格数据展示 end--
全部代码
templatediv classdata-container!--添加 start--div classdata-header!--优化keyup.entersearchHandle回车时触发searchHandle事件--el-input classinput keyup.entersearchHandle v-modelsearchInfo sizelargeplaceholder请输入名称/作者/出版社/el-inputel-button clicksearchHandle classbutton sizelarge typeprimary plain搜索/el-buttonel-button clickaddHander stylemargin-left: 40px; sizelarge classbutton typeprimaryel-iconDocumentAdd//el-iconnbsp;添加/el-button/div!--添加 end--div classdata-table!--表格数据展示 start--el-table :datadataList.list stylewidth:1300px;el-table-column propbookImg label图片 width150 aligncentertemplate #defaultscopeimg :srcscope.row.bookImg styleheight:60px//template/el-table-columnel-table-column propbookTypeId label类型 width100pxtemplate #defaultscopespan v-foritem in typeList.list :keyitem.bookTypeId{{ scope.row.bookTypeId item.bookTypeId ? item.bookTypeName : }}/span/template/el-table-columnel-table-column propbookName label名称 width100 aligncentertemplate #defaultscopediv stylecolor: #6ca7ef; v-htmlscope.row.bookName/div/template/el-table-columnel-table-column propbookPrice label价格 width100 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookWriter label作者 width60 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookPublishHouse label出版社 width80 aligncenter/el-table-columnel-table-column propbookPublishTime label出版时间 width100 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookISBN labelISBN号 width100aligncenter/el-table-columnel-table-column propbookStock label库存 width100 aligncenter/el-table-columnel-table-column propbookSalvesVolume label销量 width100 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookCatalog label目录 width60 aligncenter/el-table-columnel-table-column show-overflow-tooltip propbookDesc label简介 width60 aligncenter/el-table-columnel-table-column label操作 width200 aligncentertemplate #defaultscopeel-button round sizesmall typeprimaryclickhandleEdit(scope.$index, scope.row)修改/el-buttonel-button round sizesmall typedangerclickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-table!--表格数据展示 end--!--分页 start--div classpageel-pagination current-changecurrentChangeHaddler background layoutprev,pager,next,jumperdefault-page-sizedefaultPageSize :totaltotalData/el-pagination/div!--分页 end--!--添加对话框 start--el-dialog draggable destroy-on-close v-modeldialogAddVisible title添加 width70% centerel-form :inlinetrue :modeladdFormInfo status-icon label-width120pxel-form-item label图片el-upload list-typepicture-card actionhttp://localhost:8040/file/localhost/upload:on-successonUploadAddSuccess :on-removehandleAddRemoveel-iconPlus//el-icon/el-upload/el-form-itemel-form-item label类型el-select v-modeladdFormInfo.bookTypeId classm-2 placeholder请选择书籍类型 sizelargeel-option v-foritem in typeList.list :keyitem.bookTypeId :labelitem.bookTypeName:valueitem.bookTypeId//el-select/el-form-itemel-form-item label名称el-input v-modeladdFormInfo.bookName/el-input/el-form-itemel-form-item label价格el-input v-modeladdFormInfo.bookPrice/el-input/el-form-itemel-form-item label作者el-input v-modeladdFormInfo.bookWriter/el-input/el-form-itemel-form-item label出版社el-input v-modeladdFormInfo.bookPublishHouse/el-input/el-form-itemel-form-item label出版时间el-input v-modeladdFormInfo.bookPublishTime/el-input/el-form-itemel-form-item labelISBN号el-input v-modeladdFormInfo.bookISBN/el-input/el-form-itemel-form-item label库存el-input v-modeladdFormInfo.bookStock/el-input/el-form-itemel-form-item label销量el-input v-modeladdFormInfo.bookSalvesVolume/el-input/el-form-itemel-form-item label目录el-input stylewidth: 800px :rows6 typetextarea v-modeladdFormInfo.bookCatalog/el-input/el-form-itemel-form-item label简介el-input stylewidth: 800px :rows6 typetextarea v-modeladdFormInfo.bookDesc/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogAddVisible false取消/el-buttonel-button typeprimary clicksureHandler确定/el-button/span/template/el-dialog!--添加对话框 end--!--编辑对话框 start--el-dialog draggable destroy-on-close v-modeldialogEditorVisible title修改 width70% centerel-form :inlinetrue :modeleditorFormInfo label-width120pxel-form-item label图片el-upload list-typepicture-card actionhttp://localhost:8040/file/localhost/upload:show-file-listfalse:on-successonUploadEditorSuccessimg v-iffileEditorPath :srcfileEditorPath classavatar styleheight:60px/el-icon v-else classavatar-uploader-iconPlus//el-icon/el-upload/el-form-itemel-form-item label类型el-select v-modeleditorFormInfo.bookTypeId classm-2 placeholderSelect sizelargeel-option v-foritem in typeList.list :keyitem.bookTypeId :labelitem.bookTypeName:valueitem.bookTypeId//el-select/el-form-itemel-form-item label名称el-input v-modeleditorFormInfo.bookName/el-input/el-form-itemel-form-item label价格el-input v-modeleditorFormInfo.bookPrice/el-input/el-form-itemel-form-item label作者el-input v-modeleditorFormInfo.bookWriter/el-input/el-form-itemel-form-item label出版社el-input v-modeleditorFormInfo.bookPublishHouse/el-input/el-form-itemel-form-item label出版时间el-input v-modeleditorFormInfo.bookPublishTime/el-input/el-form-itemel-form-item labelISBN号el-input v-modeleditorFormInfo.bookISBN/el-input/el-form-itemel-form-item label库存el-input v-modeleditorFormInfo.bookStock/el-input/el-form-itemel-form-item label销量el-input v-modeleditorFormInfo.bookSalvesVolume/el-input/el-form-itemel-form-item label目录el-input stylewidth: 800px :rows6 typetextarea v-modeleditorFormInfo.bookCatalog/el-input/el-form-itemel-form-item label简介el-input stylewidth: 800px :rows6 typetextarea v-modeleditorFormInfo.bookDesc/el-input/el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogEditorVisible false取消/el-buttonel-button typeprimary clicksureEditorHandler确定/el-button/span/template/el-dialog!--编辑对话框 end--/div/div
/template
script setup
import axios from /utils/request.js
import {onMounted, reactive, ref} from vue;
//初始化类型列表
const typeList reactive({list: []
})
//数据列表
const dataList reactive({list: []
})
//数据总条数
const totalData ref(0)
//当前页
const currentPage ref(1)
//初始化分页显示条数
const defaultPageSize ref(5)
//搜索初始化状态
const searchInfo ref()
//添加-上传后图片地址
const fileAddPath ref(0)
//编辑-上传后图片地址
const fileEditorPath ref(0)
//添加添加对话框控制器
const dialogAddVisible ref(false)
//初始化添加对话框状态
const addFormInfo reactive({bookImg: ,bookName: ,bookPrice: ,bookWriter: ,bookPublishHouse: ,bookPublishTime: ,bookISBN: ,bookStock: ,bookSalvesVolume: ,bookCatalog: ,bookDesc: ,bookTypeId: ,})
//编辑对话框控制器
const dialogEditorVisible ref(false)
//初始化编辑对话框状态
const editorFormInfo reactive({bookId: ,bookImg: ,bookName: ,bookPrice: ,bookWriter: ,bookPublishHouse: ,bookPublishTime: ,bookISBN: ,bookStock: ,bookSalvesVolume: ,bookCatalog: ,bookDesc: ,bookTypeId: ,})
/*** 网路请求分页查询* */
const http (search, page, size) {axios.get(/book/book/search, {params: {search,page,size}}).then(res {if (res.data.code 200) {dataList.list res.data.data.recordstotalData.value res.data.data.total} else {ElMessage.error(res.data.message)}})
}
onMounted(() {http(null, 1, 5)axios.get(/book/bookType/findAll).then(res {typeList.list res.data.dataconsole.log(typeList.list[0])})
})
/*** 添加时文件上传成功时的钩子*/
const onUploadAddSuccess (response, uploadFile) {console.log(response)//http://192.168.66.101/group1/M00/00/00/wKhCZWQZ2Y6AfdIDAADHg7AcneY285.jpgconsole.log(uploadFile.raw.name)//springboot.jpgfileAddPath.value response.data
}
/*** 编辑时文件上传成功时的钩子*/
const onUploadEditorSuccess (response, uploadFile) {//console.log(response.data)//http://192.168.66.101/group1/M00/00/00/wKhCZWQZ2Y6AfdIDAADHg7AcneY285.jpg//console.log(uploadFile.raw.name)//springboot.jpgfileEditorPath.value response.data
}
/*** 添加时文件移除时的操作*/
const handleAddRemove (file, files) {//console.log(file.url)//file.url---blob:http://127.0.0.1:81/87591d3e-43e3-4032-bd61-c26867d32f0e//console.log(fileAddPath.value)axios.post(/book/book/delete, {params: {filePath: fileAddPath.value}}).then(res {if (res.data.code 200) {fileAddPath.value nullElMessage.success(上传时移除图片成功)}})
}
/*** 分页*/
const currentChangeHaddler (val) {http(searchInfo.value, val, 5)currentPage.value val
}
/*** 搜索按钮*/
const searchHandle () {http(searchInfo.value, 1, 5)
}
/*** 添加对话框弹出事件*/
const addHander () {dialogAddVisible.value true
}
/*** 添加对话框 确定事件*/
const sureHandler () {axios.post(/book/book/add, {bookName: addFormInfo.bookName,bookPrice: addFormInfo.bookPrice,bookImg: fileAddPath.value,bookWriter: addFormInfo.bookWriter,bookPublishHouse: addFormInfo.bookPublishHouse,bookPublishTime: addFormInfo.bookPublishTime,bookISBN: addFormInfo.bookISBN,bookStock: addFormInfo.bookStock,bookSalvesVolume: addFormInfo.bookSalvesVolume,bookCatalog: addFormInfo.bookCatalog,bookDesc: addFormInfo.bookDesc,bookTypeId: addFormInfo.bookTypeId,}).then(res {if (res.data.code 200) {dialogAddVisible.value false//刷新页面http(null, currentPage.value, 5)fileAddPath.value null} else {ElMessage.error(res.data.message)}})
}
/*** 编辑对话框 弹出事件* */
const handleEdit (index, row) {dialogEditorVisible.value trueaxios.get(/book/book/findById, {params: {bookId: row.bookId}}).then(res {if (res.data.code 200) {editorFormInfo.bookId res.data.data.bookId;fileEditorPath.value res.data.data.bookImg;editorFormInfo.bookPrice res.data.data.bookPrice;editorFormInfo.bookWriter res.data.data.bookWriter;editorFormInfo.bookPublishHouse res.data.data.bookPublishHouse;editorFormInfo.bookPublishTime res.data.data.bookPublishTime;editorFormInfo.bookISBN res.data.data.bookISBN;editorFormInfo.bookStock res.data.data.bookStock;editorFormInfo.bookSalvesVolume res.data.data.bookSalvesVolume;editorFormInfo.bookCatalog res.data.data.bookCatalog;editorFormInfo.bookDesc res.data.data.bookDesc;editorFormInfo.bookTypeId res.data.data.bookTypeId;} else {ElMessage.error(res.data.data.message)}})}
/*** 编辑对话框 确定事件*/
const sureEditorHandler () {axios.post(/book/book/update, {bookId: editorFormInfo.bookId,bookName: editorFormInfo.bookName,bookPrice: editorFormInfo.bookPrice,bookImg: fileEditorPath.value,bookWriter: editorFormInfo.bookWriter,bookPublishHouse: editorFormInfo.bookPublishHouse,bookPublishTime: editorFormInfo.bookPublishTime,bookISBN: editorFormInfo.bookISBN,bookStock: editorFormInfo.bookStock,bookSalvesVolume: editorFormInfo.bookSalvesVolume,bookCatalog: editorFormInfo.bookCatalog,bookDesc: editorFormInfo.bookDesc,bookTypeId: editorFormInfo.bookTypeId,}).then(res {if (res.data.code 200) {dialogEditorVisible.value falsehttp(null, currentPage.value, 5)} else {ElMessage.error(res.data.message)}})
}/**删除 */
const handleDelete (index, row) {ElMessageBox.confirm(确定删除么,删除,{confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(() {//确认删除axios.delete(/book/book/delete, {params: {bookId: row.bookId}}).then(res {if (res.data.code 200) {ElMessage({type: success,message: 删除成功,})//刷新http(null, currentPage.value, 5)} else {ElMessage({type: error,message: res.data.message,})}})}).catch(error {ElMessage({type: info,message: 取消删除,})})}
/script
style scoped
.el-carousel__item:nth-child(2n 1) {background-color: #d3dce6;
}.data-header {background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);padding: 20px;width: 100%;background-attachment: #fff;box-sizing: border-box;
}.data-header span {color: #6ca7ef;font-weight: 700;
}.data-header .input {width: 300px;
}.data-table {background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);padding: 20px;display: flex;width: 100%;height: 700px;
}.page {/**分页模块*//**固定定位 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动 */position: fixed;right: 10px;bottom: 100px;
}
/style
