height

属性名说明类型可选值默认值data显示的数据array——heightTable

height

tableboolean—falseborder是否带有纵向边框boolean—falsesizeTable

default

/small—fit列的宽度是否自撑开boolean—trueshow-header是否显示表头boolean—truehighlight-current-row是否要高亮当前行boolean—falsecurrent-row-key当前行的

key只写属性string

object——header-row-class-name表头行的

className

object——header-cell-class-name表头单元格的

className

string——header-cell-style表头单元格的

style

在使用reserve-selection功能与显示树形数据时该属性是必填的。

类型为

Datadefault-expand-all是否默认展开所有行当

Table

包含展开行存在或者为树形表格时有效boolean—falseexpand-row-keys可以通过该属性设置

Table

tooltipobjectshow-summary是否在表尾显示合计行boolean—falsesum-text显示摘要行第一列的文本string—Sumsummary-method自定义的合计计算方法function({

columns,

})——span-method合并行或列的计算方法function({

row,

})——select-on-indeterminate在多选表格中当仅有部分行被选中时点击表头的多选框时的行为。

true则选中所有行若为

false则取消选择所有行boolean—trueindent展示树形数据时树节点的缩进number—16lazy是否懒加载子节点数据boolean——load加载子节点数据的函数lazy

true

resolve)——tree-props渲染嵌套数据的配置选项object—{

hasChildren:

}table-layout设置表格单元、行和列的布局方式stringfixed

autofixedscrollbar-always-on总是显示滚动条boolean—falseflexible

Table

时触发的事件selectionselection-change当选择项发生变化时会触发该事件selectioncell-mouse-enter当单元格

hover

eventcell-click当某个单元格被点击时会触发该事件row,

column,

eventcell-dblclick当某个单元格被双击击时会触发该事件row,

column,

eventcell-contextmenu当某个单元格被鼠标右键点击时会触发该事件row,

column,

eventrow-click当某一行被点击时会触发该事件row,

column,

eventrow-contextmenu当某一行被鼠标右键点击时会触发该事件row,

column,

eventrow-dblclick当某一行被双击时会触发该事件row,

column,

even***ader-click当某一列的表头被点击时会触发该事件column,

even***ader-contextmenu当某一列的表头被鼠标右键点击时触发该事件column,

eventsort-change当表格的排序条件发生变化的时候会触发该事件{

column,

的筛选条件filterscurrent-change当表格的当前行发生变化的时候会触发该事件如果要高亮当前行请打开表格的

属性currentRow,

oldCurrentRowheader-dragend当拖动表头改变了列的宽度的时候会触发该事件newWidth,

oldWidth,

eventexpand-change当用户对某一行展开或者关闭的时候会触发该事件展开行时回调的第二个参数为

expandedrow,

方法名说明参数clearSelection用于多选表格清空用户的选择—getSelectionRows返回当前选中的行toggleRowSelection用于多选表格切换某一行的选中状态

selectedtoggleAllSelection用于多选表格切换全选和全不选—toggleRowExpansion用于可扩展的表格或树表格如果某行被扩展则切换。

expandedsetCurrentRow用于单选表格设定某一行为选中行

如果调用时不加参数则会取消目前高亮行的选中状态。

rowclearSort用于清空排序条件数据会恢复成未排序的状态—clearFilter传入由columnKey

如果没有参数清除所有过滤器columnKeysdoLayout对

Table

当表格可见性变化时您可能需要调用此方法以获得正确的布局—sort手动排序表格。

prop

stringscrollTo滚动到一组特定坐标(options:

ScrollToOptions

number)setScrollTop设置垂直滚动位置topsetScrollLeft设置水平滚动位置left

Table

插槽名说明子标签-自定义默认内容Table-columnappend插入至表格最后一行之后的内容

若表格有合计行该

function(index)——label显示的标题string——column-keycolumn

key

property属性string——width对应列的宽度string

width

stringcustomfalsesort-method指定数据按照哪个属性进行排序仅当sortable设置为true的时候有效。

应该如同

array——sort-orders数据在排序时所使用排序策略的轮转顺序仅当

sortable

需传入一个数组随着用户点击表头该列依次按照数组中元素的顺序进行排序array数组中的元素需为以下三者之一ascending

表示升序descending

null]resizable对应列是否可以通过拖动改变宽度需要在

el-table

属性为真boolean—trueformatter用来格式化内容function(row,

column,

index)——show-overflow-tooltip当内容过长被隐藏时显示

tooltipboolean

tooltip-optionsalign对齐方式stringleft

center

classNamestring——label-class-name当前列标题的自定义类名string——selectable仅对

typeselection

index)——reserve-selection数据刷新后是否保留选项仅对

typeselection

来让这个功能生效。

boolean—falsefilters数据过滤的选项

text

string}——filter-placement过滤弹出框的定位string与

Tooltip

属性相同—filter-multiple数据过滤的选项是否多选boolean—truefilter-method数据过滤使用的方法

true

column)——filtered-value选中的数据过滤项如果需要自定义表头过滤的渲染方式可能会需要此属性。

array——

Table-column

stylewidth:1300px;el-table-column

propbookImg

styleheight:60px//template/el-table-columnel-table-column

propbookTypeId

}}/span/template/el-table-columnel-table-column

propbookName

v-htmlscope.row.bookName/div/template/el-table-columnel-table-column

propbookPrice

aligncenter/el-table-columnel-table-column

propbookWriter

aligncenter/el-table-columnel-table-column

propbookPublishHouse

aligncenter/el-table-columnel-table-column

propbookPublishTime

aligncenter/el-table-columnel-table-column

propbookISBN

width100aligncenter/el-table-columnel-table-column

propbookStock

aligncenter/el-table-columnel-table-column

propbookSalvesVolume

aligncenter/el-table-columnel-table-column

propbookCatalog

aligncenter/el-table-columnel-table-column

propbookDesc

aligncenter/el-table-columnel-table-column

label操作

typeprimaryclickhandleEdit(scope.$index,

scope.row)修改/el-buttonel-button

round

typedangerclickhandleDelete(scope.$index,

scope.row)删除/el-button/template/el-table-column/el-table!--表格数据展示

end--

classdata-header!--优化keyup.entersearchHandle回车时触发searchHandle事件--el-input

classinput

sizelargeplaceholder请输入名称/作者/出版社/el-inputel-button

clicksearchHandle

typeprimaryel-iconDocumentAdd//el-iconnbsp;添加/el-button/div!--添加

end--div

stylewidth:1300px;el-table-column

propbookImg

styleheight:60px//template/el-table-columnel-table-column

propbookTypeId

}}/span/template/el-table-columnel-table-column

propbookName

v-htmlscope.row.bookName/div/template/el-table-columnel-table-column

propbookPrice

aligncenter/el-table-columnel-table-column

propbookWriter

aligncenter/el-table-columnel-table-column

propbookPublishHouse

aligncenter/el-table-columnel-table-column

propbookPublishTime

aligncenter/el-table-columnel-table-column

propbookISBN

width100aligncenter/el-table-columnel-table-column

propbookStock

aligncenter/el-table-columnel-table-column

propbookSalvesVolume

aligncenter/el-table-columnel-table-column

propbookCatalog

v-modeladdFormInfo.bookCatalog/el-input/el-form-itemel-form-item

label简介el-input

v-modeladdFormInfo.bookDesc/el-input/el-form-item/el-formtemplate

#footerspan

clicksureHandler确定/el-button/span/template/el-dialog!--添加对话框

end--!--编辑对话框

actionhttp://localhost:8040/file/localhost/upload:show-file-listfalse:on-successonUploadEditorSuccessimg

v-iffileEditorPath

classavatar-uploader-iconPlus//el-icon/el-upload/el-form-itemel-form-item

label类型el-select

v-modeleditorFormInfo.bookTypeId

classm-2

: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

v-modeleditorFormInfo.bookCatalog/el-input/el-form-itemel-form-item

label简介el-input

v-modeleditorFormInfo.bookDesc/el-input/el-form-item/el-formtemplate

#footerspan

clicksureEditorHandler确定/el-button/span/template/el-dialog!--编辑对话框

end--/div/div

res.data.data.recordstotalData.value

res.data.data.total}

{ElMessage.error(res.data.message)}})

onMounted(()

5)axios.get(/book/bookType/findAll).***n(res

{typeList.list

res.data.dataconsole.log(typeList.list[0])})

/***

{console.log(response)//http://192.168.66.101/group1/M00/00/00/wKhCZWQZ2Y6AfdIDAADHg7AcneY285.jpgconsole.log(uploadFile.raw.name)//springboot.jpgfileAddPath.value

response.data

{//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

{//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:

nullElMessage.success(上传时移除图片成功)}})

/***

addFormInfo.bookName,bookPrice:

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,}).***n(res

{if

{ElMessage.error(res.data.message)}})

/***

trueaxios.get(/book/book/findById,

{params:

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

else

{ElMessage.error(res.data.data.message)}})}

/***

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,}).***n(res

{if

{ElMessage.error(res.data.message)}})

}/**删除

{ElMessageBox.confirm(确定删除么,删除,{confirmButtonText:

确定,cancelButtonText:

{//确认删除axios.delete(/book/book/delete,

{params:

res.data.message,})}})}).catch(error

{ElMessage({type:

.el-carousel__item:nth-child(2n

{background-color:

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

*/position: