第1步：新建common/util.js文件，用於排序的工具函數。
export default {
// sku排列算法
cartesianProductOf() {
return Array.prototype.reduce.call(arguments,function(a, b) {
var ret = [];
a.forEach(function(a) {
b.forEach(function(b) {
ret.push(a.concat([b]));
});
});
return ret;
}, [[]]);
},
swapArray(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
},
// 上移 將當前數組index索引與後面一個元素互換位置，向數組後面移動一位
moveUp(arr, index) {
this.swapArray(arr, index, index - 1);
},
// 下移 將當前數組index索引與前面一個元素互換位置，向數組前面移動一位
moveDown(arr, index) {
this.swapArray(arr, index, index + 1);
},
}
第2步：在goods_create.js文件中引入util.js文件。
第3步：封裝排序函數sortSkuCard。
import $util from '@/common/util'
export default {
state: {
skus_type: 0,
title: "",// 商品名稱
category: [],
desc: "",
unit: "",
stock: 0,
min_stock: 0,
display_stock: 0,
status: 0,
express: "",
oprice: 0, // 市場價格
pprice: 0, // 銷售價格
cprice: 0, // 成本價格
weight: 0, // 重量
volume: 0, // 體積
// 規格卡片
sku_card: [{
name: '顏色',
type: 0,
list: []
}]
},
getters: {
},
mutations: {
// 修改state
vModelState(state, { key, value }) {
state[key] = value
},
addSkuCard(state) {
state.sku_card.push({
name: '規格名稱',
type: 0,
list: []
})
},
// 刪除規格卡片
delSkuCard(state, index) {
state.sku_card.splice(index, 1)
},
// 修改規格屬性
vModelSkuCard(state, {key, index, value }) {
state.sku_card[index][key] = value;
},
// 卡片排序
sortSkuCard(state, {action, index}){
$util[action](state.sku_card, index);
}
},
actions: {
}
}
備註：函數傳遞的參數是對象形式，其中action表示用戶行爲，此處是moveUp、moveDown表示上移與下移，index表示索引。
第4步：在sku-card.vue組件中導入mutations，並封裝上移函數sortCard。
methods: {
...mapMutations([
"addSkuCard",
"delSkuCard",
"vModelSkuCard",
"sortSkuCard"
]),
vModel(key, index, value) {
this.vModelSkuCard({ key, index, value });
},
// 排序函數（上移與下移）
sortCard(action, index) {
this.sortSkuCard({action,index});
}
}
第5步：函數綁定。
<el-button size="mini" class="ml-auto" icon="el-icon-top" @click="sortCard('moveUp',index)"></el-button>