生鮮配送ERP系統_開源升鮮寶供應鏈系統的開發過程展示（前端開發協同過程）1、杭州生鮮配送系統_升鮮寶_SaaS全鏈路生鮮供應鏈管理系統_升鮮寶_15382353715

 生鮮配送ERP系統_開源升鮮寶供應鏈系統的開發過程展示（前端開發協同過程）1、杭州生鮮配送系統_升鮮寶_SaaS全鏈路生鮮供應鏈管理系統_升鮮寶_15382353715

 

一、form內元素排版以下圖（緊湊一些，對齊）

 

 

一、複選框改爲單選

（優惠券、拼團、預售、邀請活動、新人這幾個模塊裏有這部份內容。）

 

 

 

 

一、表格中涉及到整行排序可上下調整的用如下樣式：

如圖，到頂端或低端則不可再點擊

參考Html

<el-table-column prop="present" label="排序">
   <template slot-scope="scope">
       <el-button
          size="mini"
          :disabled="scope.$index===0"
          @click="moveUp(scope.$index,scope.row)"><i class="el-icon-arrow-up"></i>
</el-button>
       <el-button
           size="mini"
           :disabled="scope.$index===(productData.length-1)"
           @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i>
</el-button>
   </template>
</el-table-column>

　

參考Methods

//上移
    moveUp(index,row){
        var that = this
        if (index > 0) {
          let upDate = that.productData[index - 1]
          that.productData.splice(index - 1, 1)
          that.productData.splice(index,0, upDate)
        } else {
        }
    },
 //下移
    moveDown(index,row){
        var that = this
        if ((index + 1) === that.productData.length){
        } else {
          let downDate = that.productData[index + 1]
          that.productData.splice(index + 1, 1)
          that.productData.splice(index,0, downDate)
        }
    },

　　

　

 

 

一、商品規格按如下樣式寫

<template slot-scope="scope">

  <el-tag size="mini">季節：春</el-tag>

</template>

　　

 

 

一、新增頁面裏的表格複選框也刪掉

 

 

 

一、全部的選擇商品相似的已選擇都刪掉

 

 

 

二、同一個頁面中，原來在表格上方綠色的添加按鈕 加在表格的操做列裏，以下圖所示：

注：做用：點擊【添加】就是把這個商品選擇了；點擊前是綠色按鈕，點擊後是紅色取消按鈕； 表格前面的checkbox去掉

 

 

 

 

 

一、頁碼樣式爲：

 

layout="total, sizes, prev, pager, next, jumper"

　　

 

 

一、Switch開關字段和樣式爲：

（開關都改爲禁用和啓用，顏色爲圖示顏色）

 

 

一、表格全部內容都居中顯示：

<el-table-column
     align="center">

　　

 

 

一、表格中，無下拉的：第一列是複選框（可全選）;

有下拉的：第一列是下拉，第二列是複選框（可全選）：

 

 

 

一、表格上面，共搜索和已選擇提示去掉：

 

 

 

 

 

 

一、表格上面，選項卡樣式以下（默認size）：

 

 

 

一、去掉清除按鈕：

 

 

 

一、增長刪除按鈕，且刪除按鈕的功能和導出功能相似，是將表格中選中的內容刪掉：

 

 

 

查詢按鈕，在默認是白色的，hover時是淡青色的

 

 

 

一、商品選擇按鈕和查詢按鈕的樣式效果同樣：

 

 

 

 

一、頁面右下角相關按鈕樣式：

 

 

 

 

 

 

一、全部輸入框可清空，得到焦點樣式和一級下拉框的樣式：

 

<el-input v-model=""   clearable>

 <el-select v-model=""  clearable>

　　

 

一、新增、修改（編輯）時，排序碼的位置，作成這個樣式：

 

 

 

一、頁面對齊樣式參考：