Vue element商品列表的增刪改功能實(shí)現(xiàn)

更新時(shí)間：2022年08月30日 11:33:28 作者：benlalagang

這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

介紹

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

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

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

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

addGoods(){
this.$router.push('/goods/add')
}

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

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

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

我們以編輯商品為例

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

{
  path:'/goods',
  component:GoodsList
},
{
  path:'/goods/add',
  component:GoodsAdd
},
{
  path:'/goods/edit/:id',
  component:GoodsEdit
}

第一步先使用組件進(jìn)行頁(yè)面布局：

主要使用到了 el-steps 步驟條組件和 el-tabs 標(biāo)簽頁(yè)組件的聯(lián)動(dòng) 使他們步長(zhǎng)一致使用共同的

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

當(dāng)標(biāo)簽頁(yè)發(fā)生切換時(shí) 根據(jù)name 賦值給 activeIndex

async handleClick(){
   this.activeIndex = this.activeName * 1
   // 選擇了商品(動(dòng)態(tài))參數(shù)選項(xiàng)
 },

這樣兩個(gè)組件就可以聯(lián)動(dòng)展示了

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

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

基本信息

組件渲染el-input 數(shù)據(jù)綁定 v-model 類型限制 tpye=‘number’ prop合法值驗(yàn)證

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

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

基本信息中還有一個(gè)要點(diǎn)：分類選擇

          <el-form-item label="選擇商品分類">
el-cascader 級(jí)聯(lián)選擇器
            <el-cascader
默認(rèn)選定的值是根據(jù)id請(qǐng)求過(guò)來(lái)的分類數(shù)組
              v-model="AddGoodsForm.goods_cat"
              style="width: 400px"
數(shù)據(jù)來(lái)源：cateLists 一進(jìn)入頁(yè)面請(qǐng)求過(guò)來(lái)的
              :options="cateLists"
有清空按鈕
              clearable
禁用 編輯頁(yè)面 不讓修改分類
              disabled
級(jí)聯(lián)選擇器的相關(guān)規(guī)則
              :props="CSet"
選擇發(fā)生改變時(shí) 執(zhí)行的回調(diào)
              @change="handleChange"></el-cascader>
          </el-form-item>
<script>
數(shù)據(jù)來(lái)源：
      async getAllCate(){
        const {data:res} = await this.$http.get('categories')
        if (res.meta.status !==200) return this.$Msg.error('獲取商品分類列表失??！')
        this.cateLists = res.data
      }
級(jí)聯(lián)選擇器的規(guī)則
        CSet:{
展示下一級(jí)觸發(fā)方式 鼠標(biāo)懸浮
          expandTrigger: 'hover',
指定選項(xiàng)的子選項(xiàng)為選項(xiàng)對(duì)象的某個(gè)屬性值
          children:'children',
顯示的文本
          label:'cat_name',
文本對(duì)應(yīng)的value
          value:'cat_id',
        }
選擇發(fā)生改變時(shí) 執(zhí)行的回調(diào)  只讓選擇第三級(jí)  不是的話就清空 選擇不進(jìn)去
      handleChange(){
        if (this.AddGoodsForm.goods_cat.length !== 3){
          this.AddGoodsForm.goods_cat = []
        }
        console.log(this.AddGoodsForm.goods_cat)
      }
<script>

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

并且在切換標(biāo)簽頁(yè)時(shí)可以驗(yàn)證AddGoodsForm.goods_cat 的長(zhǎng)度

      leaveTabs(activeName, oldActiveName){
        if(oldActiveName === '0' && this.AddGoodsForm.goods_cat.length !== 3){
          this.$Msg.error('請(qǐng)先選擇商品分類！')
          return false
        }

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

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

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

上傳主圖

        <el-tab-pane label="4.商品圖片" name="3">
          <el-upload
            class="upload-demo"
            :action="actionToUrl"
            :on-preview="handlePreview2"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :headers="UploadHeaders"
            list-type="picture-card">
            <el-button size="small" type="primary">點(diǎn)擊上傳</el-button>
            <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過(guò)500kb</div>
          </el-upload>
        </el-tab-pane>
    <el-dialog
      title="預(yù)覽圖片"
      :visible.sync="Preview"
      width="45%">
      <img :src="PreviewPic" alt="" style="width: 100%">
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="Preview = false">確 定</el-button>
  </span>
    </el-dialog>
<script>
action	必選參數(shù)，上傳的地址 這里用的是本地服務(wù)器
actionToUrl:'http://127.0.0.1:8888/api/private/v1/upload'
on-preview 點(diǎn)擊文件列表中已上傳的文件時(shí)的鉤子 點(diǎn)擊出現(xiàn)對(duì)話框顯示放大預(yù)覽圖
      handlePreview2(file){
        this.PreviewPic=file.response.data.url // 顯示圖片的地址
        this.Preview = true // 決定對(duì)話框顯示的布爾值
      }
on-remove 文件列表移除文件時(shí)的鉤子
      handleRemove(file){
      //1.獲取將要?jiǎng)h除的圖片臨時(shí)路徑
        const fileUrl = file.response.data.tmp_path
      //2.從pics 數(shù)組中，找到這個(gè)圖片對(duì)應(yīng)的索引值
        let aaa = this.AddGoodsForm.pics.findIndex(value => value === fileUrl)
        console.log(aaa)
      //3.調(diào)用數(shù)組 splice 方法 把圖片信息對(duì)象從pics 數(shù)組中移除
        this.AddGoodsForm.pics.splice(aaa,1)
        console.log(this.AddGoodsForm.pics)
      }
on-success 文件上傳成功時(shí)的鉤子
      async handleSuccess(response){
       // 找出定義一下 新上傳文件的路徑地址
       const NewPicUrl = response.data.tmp_path
       // push 到預(yù)留表單位中
        this.AddGoodsForm.pics.push(NewPicUrl)
        console.log(this.AddGoodsForm.pics)
        // const {data:res} = await this.$http.put(`goods/${this.NowEditId}/pics`,this.AddGoodsForm.pics)
        // if (res.meta.status !==200) return this.$Msg.error('更新主圖失?。?)
        // this.$Msg.success('更新主圖成功！')
      }
headers 設(shè)置上傳的請(qǐng)求頭部
        UploadHeaders:{
          Authorization:window.sessionStorage.getItem('token')
        },
</script>

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

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

在main.js 中注冊(cè) 并引入樣式

npm install vue-quill-editor
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
Vue.use(VueQuillEditor, /* { default global options } */)

在組件中使用

        <el-tab-pane label="5.商品內(nèi)容" name="4">
          <quill-editor
            ref="myQuillEditor"
數(shù)據(jù)雙向綁定 便于發(fā)送請(qǐng)求
            v-model="AddGoodsForm.goods_introduce"
富文本編輯器的核心配置
            :options="editorOption"
          />
        </el-tab-pane>
<script>
// 此處定義在data外
  const toolbarOptions = [
    ['insertMetric'],
    ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜體，下劃線，刪除線
    ['blockquote', 'code-block'],                     //引用，代碼塊
    [{ 'header': 1 }, { 'header': 2 }],               // 幾級(jí)標(biāo)題
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],    // 有序列表，無(wú)序列表
    [{ 'script': 'sub' }, { 'script': 'super' }],     // 下角標(biāo)，上角標(biāo)
    [{ 'indent': '-1' }, { 'indent': '+1' }],         // 縮進(jìn)
    [{ 'direction': 'rtl' }],                         // 文字輸入方向
    [{ 'size': ['small', false, 'large', 'huge'] }],  // 字體大小
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 標(biāo)題
    [{ 'color': [] }, { 'background': [] }],          // 顏色選擇
    [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字體
    [{ 'align': [] }],    // 居中
    ['clean'],            // 清除樣式,
    ['link', 'image']   // 上傳圖片、上傳視頻
  ]
  // toolbar標(biāo)題
  const titleConfig = [
    { 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: '編號(hào)列表' },
    { Choice: '.ql-list[value="bullet"]', title: '項(xiàng)目列表' },
    { Choice: '.ql-direction', title: '文本方向' },
    { Choice: '.ql-header[value="1"]', title: 'h1' },
    { Choice: '.ql-header[value="2"]', title: 'h2' },
    { Choice: '.ql-align', title: '對(duì)齊方式' },
    { 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: '下標(biāo)' },
    { Choice: '.ql-script[value="super"]', title: '上標(biāo)' },
    { Choice: '.ql-indent[value="-1"]', title: '向左縮進(jìn)' },
    { Choice: '.ql-indent[value="+1"]', title: '向右縮進(jìn)' },
    { Choice: '.ql-header .ql-picker-label', title: '標(biāo)題大小' },
    { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '標(biāo)題一' },
    { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '標(biāo)題二' },
    { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '標(biāo)題三' },
    { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '標(biāo)題四' },
    { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '標(biāo)題五' },
    { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '標(biāo)題六' },
    { Choice: '.ql-header .ql-picker-item:last-child', title: '標(biāo)準(zhǔn)' },
    { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小號(hào)' },
    { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號(hào)' },
    { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號(hào)' },
    { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標(biāo)準(zhǔn)' },
    { Choice: '.ql-align .ql-picker-item:first-child', title: '居左對(duì)齊' },
    { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對(duì)齊' },
    { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對(duì)齊' },
    { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對(duì)齊' }
  ]
// 此處書寫在data當(dāng)中
        editorOption: {
          placeholder: '請(qǐng)?jiān)谶@里輸入......',
          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 (let item of titleConfig) {
          let tip = document.querySelector('.quill-editor ' + item.Choice)
          if (!tip) continue
          tip.setAttribute('title', item.title)
        }
      },
      showHandle () {
        this.$Msg.error('這是自定義工具欄的方法！')
      },
      // 自定義按鈕內(nèi)容初始化
      initButton () {
        const editorButton = document.querySelector('.ql-insertMetric')
        editorButton.innerHTML = '<i class="el-icon-link" style="font-size: 18px;color:black"></i>'
      },
      // 失去焦點(diǎn)
      onEditorBlur (editor) { },
      // 獲得焦點(diǎn)
      onEditorFocus (editor) { },
      // 開始
      onEditorReady (editor) { },
      // 值發(fā)生變化
      onEditorChange (editor) {
        // 如果需要手動(dòng)控制數(shù)據(jù)同步，父組件需要顯式地處理changed事件
        // this.content = editor.html;
        console.log(editor);
      },
</script>

最后提交數(shù)據(jù)

        <el-tab-pane label="6.提交商品" name="5">
          <el-empty image="http://www.wsg3096.com/gangback/pub/asdc1.png" :image-size="320" description="確定所有數(shù)據(jù)添加完畢后就可以提交啦！">
            <el-button type="primary" icon="el-icon-success" @click="ToGoods">上傳商品</el-button>
          </el-empty>
        </el-tab-pane>
<script>
      // 確定上傳的按鈕
      async ToGoods(){
        this.$refs.AddGoodsFormRef.validate(async valid =>{
          if (!valid)  return this.$Msg.error('請(qǐng)檢查下各項(xiàng)數(shù)據(jù)是否規(guī)范！')
          // 執(zhí)行添加業(yè)務(wù)的邏輯 先深拷貝一下 防止改變 級(jí)聯(lián)選擇器
          const form = _.cloneDeep(this.AddGoodsForm)
          // 處理當(dāng)前商品所屬ID 服務(wù)器要求 ，分割的字符串
          form.goods_cat = form.goods_cat.join(',')
          // 請(qǐng)求過(guò)來(lái)的數(shù)據(jù)保存到ManyData OnlyData 展示 返回去的時(shí)候 還用服務(wù)器的數(shù)據(jù)就行
          form.attrs = [...this.ManyData,...this.OnlyData]
         // console.log(form)
          const {data : res} = await this.$http.put(`goods/${this.NowEditId}`,form)
          if (res.meta.status !== 200) return this.$Msg.error('編輯商品失?。?)
          this.$Msg.success('編輯商品成功！')
          await this.$router.push('/goods')
        })
      }
</script>