Vueelement商品列表的增刪改功能實現(xiàn)

第Vueelement商品列表的增刪改功能實現(xiàn)目錄介紹基本信息上傳主圖商品信息vue富文本編輯器的配置最后提交數(shù)據(jù)

介紹

整體和用戶列表類似功能步驟有：

面包屑導(dǎo)航外部是大的卡片組件搜索商品添加商品表格渲染數(shù)據(jù)作用域插槽用于操作按鈕分頁器組件的使用

不一樣的點：之前編輯信息新增信息是彈出對話框編輯但商品信息內(nèi)容較多我們跳轉(zhuǎn)到一個組件、并且進行商品編輯的時候要進行路由傳參來渲染初始數(shù)據(jù)

點擊添加商品按鈕時跳轉(zhuǎn)到新增商品組件對應(yīng)路徑：

addGoods(){

this.$router.push('/goods/add')

}

點擊編輯商品按鈕時跳轉(zhuǎn)到編輯商品組件對應(yīng)路徑并且傳入id

ToEditGoods(id){

this.$router.push(`/goods/edit/${id}`)

}

新增商品和編輯商品組件布局一致只是新增商品不用傳參請求數(shù)據(jù)

我們以編輯商品為例

在設(shè)置路由對應(yīng)關(guān)系的時候預(yù)留占位符

{

path:'/goods',

component:GoodsList

path:'/goods/add',

component:GoodsAdd

path:'/goods/edit/:id',

component:GoodsEdit

}

第一步先使用組件進行頁面布局：

主要使用到了el-steps步驟條組件和el-tabs標簽頁組件的聯(lián)動使他們步長一致使用共同的

active步驟條的active動態(tài)綁定到activeIndex上

當標簽頁發(fā)生切換時根據(jù)name賦值給activeIndex

asynchandleClick(){

this.activeIndex=this.activeName*1

//選擇了商品(動態(tài))參數(shù)選項

},

這樣兩個組件就可以聯(lián)動展示了

標簽頁組件其實是包裹在el-form當中方便統(tǒng)一提交給服務(wù)器

接下來就是表單內(nèi)部組件渲染表單驗證了

基本信息

組件渲染el-input數(shù)據(jù)綁定v-model類型限制tpye=numberprop合法值驗證

這里需要自定義驗證的是商品價格不能小于0商品數(shù)量必須是整數(shù)

必填就可以直接使用自帶的

基本信息中還有一個要點：分類選擇

el-form-itemlabel="選擇商品分類"

el-cascader級聯(lián)選擇器

el-cascader

默認選定的值是根據(jù)id請求過來的分類數(shù)組

v-model="AddGoodsForm.goods_cat"

數(shù)據(jù)來源：cateLists一進入頁面請求過來的

:options="cateLists"

有清空按鈕

clearable

禁用編輯頁面不讓修改分類

disabled

級聯(lián)選擇器的相關(guān)規(guī)則

:props="CSet"

選擇發(fā)生改變時執(zhí)行的回調(diào)

@change="handleChange"/el-cascader

/el-form-item

script

數(shù)據(jù)來源：

asyncgetAllCate(){

const{data:res}=awaitthis.$http.get('categories')

if(res.meta.status!==200)returnthis.$Msg.error('獲取商品分類列表失敗！')

this.cateLists=res.data

級聯(lián)選擇器的規(guī)則

CSet:{

展示下一級觸發(fā)方式鼠標懸浮

expandTrigger:'hover',

指定選項的子選項為選項對象的某個屬性值

children:'children',

顯示的文本

label:'cat_name',

文本對應(yīng)的value

value:'cat_id',

選擇發(fā)生改變時執(zhí)行的回調(diào)只讓選擇第三級不是的話就清空選擇不進去

handleChange(){

if(this.AddGoodsForm.goods_cat.length!==3){

this.AddGoodsForm.goods_cat=[]

console.log(this.AddGoodsForm.goods_cat)

script

如果是新增商品頁面的話也大體一致把disabled去掉即可

并且在切換標簽頁時可以驗證AddGoodsForm.goods_cat的長度

leaveTabs(activeName,oldActiveName){

if(oldActiveName==='0'this.AddGoodsForm.goods_cat.length!==3){

this.$Msg.error('請先選擇商品分類！')

returnfalse

}

根據(jù)服務(wù)器返回的數(shù)據(jù)

渲染商品參數(shù)-attr.many和商品屬性-attr.only

分別渲染多選框組和輸入框組來v-for循環(huán)

上傳主圖

el-tab-panelabel="4.商品圖片"name="3"

el-upload

:action="actionToUrl"

:on-preview="handlePreview2"

:on-remove="handleRemove"

:on-success="handleSuccess"

:headers="UploadHeaders"

list-type="picture-card"

el-buttonsize="small"type="primary"點擊上傳/el-button

divslot="tip"只能上傳jpg/png文件，且不超過500kb/div

/el-upload

/el-tab-pane

el-dialog

title="預(yù)覽圖片"

:visible.sync="Preview"

width="45%"

img:src="PreviewPic"alt=""

spanslot="footer"

el-buttontype="primary"@click="Preview=false"確定/el-button

/span

/el-dialog

script

action必選參數(shù)，上傳的地址這里用的是本地服務(wù)器

actionToUrl:':8888/api/private/v1/upload'

on-preview點擊文件列表中已上傳的文件時的鉤子點擊出現(xiàn)對話框顯示放大預(yù)覽圖

handlePreview2(file){

this.PreviewPic=file.response.data.url//顯示圖片的地址

this.Preview=true//決定對話框顯示的布爾值

on-remove文件列表移除文件時的鉤子

handleRemove(file){

//1.獲取將要刪除的圖片臨時路徑

constfileUrl=file.response.data.tmp_path

//2.從pics數(shù)組中，找到這個圖片對應(yīng)的索引值

letaaa=this.AddGoodsForm.pics.findIndex(value=value===fileUrl)

console.log(aaa)

//3.調(diào)用數(shù)組splice方法把圖片信息對象從pics數(shù)組中移除

this.AddGoodsForm.pics.splice(aaa,1)

console.log(this.AddGoodsForm.pics)

on-success文件上傳成功時的鉤子

asynchandleSuccess(response){

//找出定義一下新上傳文件的路徑地址

constNewPicUrl=response.data.tmp_path

//push到預(yù)留表單位中

this.AddGoodsForm.pics.push(NewPicUrl)

console.log(this.AddGoodsForm.pics)

//const{data:res}=awaitthis.$http.put(`goods/${this.NowEditId}/pics`,this.AddGoodsForm.pics)

//if(res.meta.status!==200)returnthis.$Msg.error('更新主圖失??！')

//this.$Msg.success('更新主圖成功！')

headers設(shè)置上傳的請求頭部

UploadHeaders:{

Authorization:window.sessionStorage.getItem('token')

/script

商品信息vue富文本編輯器的配置

先執(zhí)行安裝語句：

在main.js中注冊并引入樣式

npminstallvue-quill-editor

importVueQuillEditorfrom'vue-quill-editor'

import'quill/dist/quill.core.css'//importstyles

import'quill/dist/quill.snow.css'//forsnowtheme

import'quill/dist/quill.bubble.css'//forbubbletheme

Vue.use(VueQuillEditor,/*{defaultglobaloptions}*/)

在組件中使用

el-tab-panelabel="5.商品內(nèi)容"name="4"

quill-editor

ref="myQuillEditor"

數(shù)據(jù)雙向綁定便于發(fā)送請求

v-model="AddGoodsForm.goods_introduce"

富文本編輯器的核心配置

:options="editorOption"

/el-tab-pane

script

//此處定義在data外

consttoolbarOptions=[

['insertMetric'],

['bold','italic','underline','strike'],//加粗，斜體，下劃線，刪除線

['blockquote','code-block'],//引用，代碼塊

[{'header':1},{'header':2}],//幾級標題

[{'list':'ordered'},{'list':'bullet'}],//有序列表，無序列表

[{'script':'sub'},{'script':'super'}],//下角標，上角標

[{'indent':'-1'},{'indent':'+1'}],//縮進

[{'direction':'rtl'}],//文字輸入方向

[{'size':['small',false,'large','huge']}],//字體大小

[{'header':[1,2,3,4,5,6,false]}],//標題

[{'color':[]},{'background':[]}],//顏色選擇

[{'font':['SimSun','SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial']}],//字體

[{'align':[]}],//居中

['clean'],//清除樣式,

['link','image']//上傳圖片、上傳視頻

//toolbar標題

consttitleConfig=[

{Choice:'.ql-insertMetric',title:'跳轉(zhuǎn)配置'},

{Choice:'.ql-bold',title:'加粗'},

{Choice:'.ql-italic',title:'斜體'},

{Choice:'.ql-underline',title:'下劃線'},

{Choice:'.ql-header',title:'段落格式'},

{Choice:'.ql-strike',title:'刪除線'},

{Choice:'.ql-blockquote',title:'塊引用'},

{Choice:'.ql-code',title:'插入代碼'},

{Choice:'.ql-code-block',title:'插入代碼段'},

{Choice:'.ql-font',title:'字體'},

{Choice:'.ql-size',title:'字體大小'},

{Choice:'.ql-list[value="ordered"]',title:'編號列表'},

{Choice:'.ql-list[value="bullet"]',title:'項目列表'},

{Choice:'.ql-direction',title:'文本方向'},

{Choice:'.ql-header[value="1"]',title:'h1'},

{Choice:'.ql-header[value="2"]',title:'h2'},

{Choice:'.ql-align',title:'對齊方式'},

{Choice:'.ql-color',title:'字體顏色'},

{Choice:'.ql-background',title:'背景顏色'},

{Choice:'.ql-image',title:'圖像'},

{Choice:'.ql-video',title:'視頻'},

{Choice:'.ql-link',title:'添加鏈接'},

{Choice:'.ql-formula',title:'插入公式'},

{Choice:'.ql-clean',title:'清除字體格式'},

{Choice:'.ql-script[value="sub"]',title:'下標'},

{Choice:'.ql-script[value="super"]',title:'上標'},

{Choice:'.ql-indent[value="-1"]',title:'向左縮進'},

{Choice:'.ql-indent[value="+1"]',title:'向右縮進'},

{Choice:'.ql-header.ql-picker-label',title:'標題大小'},

{Choice:'.ql-header.ql-picker-item[data-value="1"]',title:'標題一'},

{Choice:'.ql-header.ql-picker-item[data-value="2"]',title:'標題二'},

{Choice:'.ql-header.ql-picker-item[data-value="3"]',title:'標題三'},

{Choice:'.ql-header.ql-picker-item[data-value="4"]',title:'標題四'},

{Choice:'.ql-header.ql-picker-item[data-value="5"]',title:'標題五'},

{Choice:'.ql-header.ql-picker-item[data-value="6"]',title:'標題六'},

{Choice:'.ql-header.ql-picker-item:last-child',title:'標準'},

{Choice:'.ql-size.ql-picker-item[data-value="small"]',title:'小號'},

{Choice:'.ql-size.ql-picker-item[data-value="large"]',title:'大號'},

{Choice:'.ql-size.ql-picker-item[data-value="huge"]',title:'超大號'},

{Choice:'.ql-size.ql-picker-item:nth-child(2)',title:'標準'},

{Choice:'.ql-align.ql-picker-item:first-child',title:'居左對齊'},

{Choice:'.ql-align.ql-picker-item[data-value="center"]',title:'居中對齊'},

{Choice:'.ql-align.ql-picker-item[data-value="right"]',title:'居右對齊'},

{Choice:'.ql-align.ql-picker-item[data-value="justify"]',title:'兩端對齊'}

//此處書寫在data當中

editorOption:{

placeholder:'請在這里輸入......',

theme:'snow',//主題snow/bubble

modules:{

history:{

delay:1000,

maxStack:50,

userOnly:false

toolbar:{

container:toolbarOptions,

handlers:{

insertMetric:this.showHandle

//此處書寫在methods中

//配置富文本編輯器

initTitle(){

document.getElementsByClassName('ql-editor')[0].dataset.placeholder=''

for(letitemoftitleConfig){

lettip=document.querySelector('.quill-editor'+item.Choice)

if(!tip)continue

tip.setAttribute('title',item.title)

showHandle(){

this.$Msg.error('這是自定義工具欄的方法！')

//自定義按鈕內(nèi)容初始化

initButton(){

consteditorButton=document.querySelector('.ql-insertMetric')

editorButton.innerHTML='i/i'

//失去焦點

onEditorBlur(editor){},

//獲得焦點

onEditorFocus(editor){},

//開始

onEditorReady(editor){},

//值發(fā)生變化

onEditorChange(editor){

//如果需要手動控制數(shù)據(jù)同步，父組件需要顯式地處理changed事件

//this