Vue項目中使用Elemen-tUI做一個Steps步驟條和Tabs標籤頁的聯動效果功能

Vue項目中使用Elemen-tUI做一個steps步驟條:左邊的內容和步驟條進度效果是同步的切換,頂部是

(1)steps步驟條

(2)Tabs標籤頁

(3)steps步驟條和tabs標籤頁之間的聯動效果

思路:

      那麼這裏需要步驟條的屬性名稱和標籤頁的屬性名稱聯動同步切換的功能:步驟條是屬性 :active="activeIndex" 來實現動態切換,tabs標籤頁是有個v-model屬性綁定到每一個成員的那麼屬性來實現動態天哪切換。---那麼兩個綁定實現聯動效果的話:步驟條的activetabs標籤頁的v-model都給綁定到data裏的activeIndex數據源就可以

是因爲activeIndex 只能接受數字,所有activeIndex-0是數字格式,data裏的activeIndex頁是 activeIndex: '0' 格式,接受v-model能接受的格式。就這樣tabs標籤頁和steps步驟條實現聯動鏈接效果。

(4)標籤頁寫Form表單

效果圖:

code代碼
<template>
  <div>
    <el-card>
      <!--    提示區域-->
      <el-alert title="添加商品信息" type="warning" center show-icon :closable="false">
      </el-alert>
      <!--    步驟條-->
      <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品參數"></el-step>
        <el-step title="商品屬性"></el-step>
        <el-step title="商品圖片"></el-step>
        <el-step title="商品內容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!--    tabs標籤頁-->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="'left'">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名稱" prop="goods_name">
              <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品價格" prop="goods_price">
              <el-input v-model="addForm.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品數量" prop="goods_number">
              <el-input v-model="addForm.goods_number" type="number"></el-input>
            </el-form-item>
            

          </el-tab-pane>
          <el-tab-pane label="商品參數" name="1">商品參數</el-tab-pane>
          <el-tab-pane label="商品屬性" name="2">商品屬性</el-tab-pane>
          <el-tab-pane label="商品圖片" name="3">商品圖片</el-tab-pane>
          <el-tab-pane label="商品內容" name="4">商品內容</el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '0',
      //添加商品的表單對象
      addForm: {},
      addFormRules: {
        goods_name: [
          {required: true, message: '請輸入商品名稱', trigger: 'blur'}
        ],
        goods_price: [
          {required: true, message: '請輸入商品價格', trigger: 'blur'}
        ],
        goods_weight: [
          {required: true, message: '請輸入商品重量', trigger: 'blur'}
        ],
        goods_number: [
          {required: true, message: '請輸入商品數量', trigger: 'blur'}
        ],
      },   //必應驗證規則對象
      goods_name: '',   //商品名稱
      goods_price: 0,    //價格
      goods_weight: 0,    //重量
      goods_number: 0,    //數量
      catelist:[],     //獲取商品分類數據列表

    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    // 獲取所有分類數據

  }
}

(5)級聯選擇器(渲染獲取數據)

在create生命週期裏觸發函數獲取所有商品分類的數據,並且賦值給級聯選擇器的數據源

(6)判斷級聯選擇器選擇範圍

就是判斷級聯選擇器的選擇範圍:選擇了三級是true成立,選擇了1,2級分類是不成立,如果是選中了1,2級分類的話直接清空

code代碼
 <template>
  <div>
    <!--  麪包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片視圖區-->
    <el-card>
      <!--    提示區域-->
      <el-alert title="添加商品信息" type="warning" center show-icon :closable="false">
      </el-alert>
      <!--    步驟條-->
      <el-steps :space="200" :active="activeIndex-0" finish-status="success" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品參數"></el-step>
        <el-step title="商品屬性"></el-step>
        <el-step title="商品圖片"></el-step>
        <el-step title="商品內容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <!--    tabs標籤頁-->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px" label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="'left'">
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="商品名稱" prop="goods_name">
              <el-input v-model="addForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品價格" prop="goods_price">
              <el-input v-model="addForm.goods_price" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="addForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品數量" prop="goods_number">
              <el-input v-model="addForm.goods_number" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分類" prop="goods_cat">
              <el-cascader
                expand-trigger="hover "
                v-model="addForm.goods_cat"
                :options="catelist"
                :props="cateProps"
                @change="handleChange">

              </el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品參數" name="1">商品參數</el-tab-pane>
          <el-tab-pane label="商品屬性" name="2">商品屬性</el-tab-pane>
          <el-tab-pane label="商品圖片" name="3">商品圖片</el-tab-pane>
          <el-tab-pane label="商品內容" name="4">商品內容</el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '0',
      //添加商品的表單對象
      addForm: {
        goods_name: '',   //商品名稱
        goods_price: 0,    //價格
        goods_weight: 0,    //重量
        goods_number: 0,    //數量
        goods_cat: [],    //商品所屬於的分類數組
      },
      addFormRules: {
        goods_name: [
          {required: true, message: '請輸入商品名稱', trigger: 'blur'}
        ],
        goods_price: [
          {required: true, message: '請輸入商品價格', trigger: 'blur'}
        ],
        goods_weight: [
          {required: true, message: '請輸入商品重量', trigger: 'blur'}
        ],
        goods_number: [
          {required: true, message: '請輸入商品數量', trigger: 'blur'}
        ],
        goods_cat:[
          {required: true, message: '請輸入商品數量', trigger: 'blur'}
        ]
      },   //必應驗證規則對象
      catelist: [],     //獲取商品分類數據列表
      cateProps: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      }

    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    // 獲取所有分類數據
    async getCateList() {
      const {data: res} = await this.$http.get('categories')
      if (res.meta.status !== 200) {
        return this.$message.error('獲取商品分類失敗!')
      }
      this.$message.success('獲取商品分類成功!')
      this.catelist = res.data
      console.log(res.data)
    },
    // 簡歷選擇器變化時觸發的函數
    handleChange() {
      console.log(this.addForm.goods_cat)
      if (this.addForm.goods_cat.length !== 3){
        this.addForm.goods_cat.length=[]
      }
    }
  },


}
</script>

<style scoped lang="less">

</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章