呈现效果
需求： （1）无选中时，按钮为不可点击状态；（2）选中对象的序号不连续时，按钮为不可点击状态（3）选中对象包含序号1时，置顶和上移按钮为不可点击状态（4）选中对象包含表格最后一项时，置底和下移按钮为不可点击状态
html
<el-button :disabled="multipleSelection.length === 0 || oneIndex === 0 || !isTrue || isZero" @click="moveTop">
置顶
</el-button>
<el-button :disabled="multipleSelection.length === 0 || oneIndex === 0 || !isTrue || isZero" @click="moveUp">
上移
</el-button>
<el-button
:disabled="multipleSelection.length === 0 || oneIndex === systemTagList.length - 1 || !isTrue || isBottom"
@click="moveDown"
>
下移
</el-button>
<el-button
:disabled="multipleSelection.length === 0 || oneIndex === systemTagList.length - 1 || !isTrue || isBottom"
@click="moveBottom"
>
置底
</el-button>
<el-button :disabled="multipleSelection.length === 0" @click="saveSort">保存</el-button>
变量
// 以下移动变量
selestMoveList: [],
// 单选时的index
oneIndex: null,
// 多选时的index列表
indexList: [],
// 多选对象是否连续
isTrue: true,
// 多选对象中是否包含第一个对象
isZero: false,
// 多选对象中是否包含最后一个对象
isBottom: false,
具体函数
// 多选函数 绑定在el-table上 @selection-change="handleSelectionChange"
handleSelectionChange(val) {
this.multipleSelection = val;
// 选中的对象列表
this.selestMoveList = Object.assign([], this.multipleSelection);
// 单选时
if (this.selestMoveList.length === 1) {
this.indexList = [];
this.isTrue = true;
this.isZero = false;
this.isBottom = false;
// 以上为单选时重置多选变量最初状态
this.oneIndex = null;
// 单选对象的index值
this.oneIndex = this.systemTagList.indexOf(this.selestMoveList[0]);
} else {
// 重置indexList
this.indexList = [];
this.oneIndex = null;
// 一一取出选中对象的index值组成列表
for (let i = 0; i < this.selestMoveList.length; i++) {
let oneIndex = this.systemTagList.indexOf(this.selestMoveList[i]);
this.indexList.push(oneIndex);
}
// 对index列表进行正序排序，
this.indexList.sort(function (x, y) {
return x - y;
});
// index列表是否包含0，包含0，则不能进行上移和置顶
this.isZero = this.indexList.indexOf(0) === -1 ? false : true;
// index列表是否包含最大索引值，包含不能进行下移和置底
this.isBottom = this.indexList.indexOf(this.systemTagList.length - 1) === -1 ? false : true;
// 选中值是否连续，是才可以可进行置顶、置底、上移、下移操作
this.isTrue =
this.indexList[this.indexList.length - 1] - this.indexList[0] === this.indexList.length - 1 ? true : false;
}
},
// 上移
moveUp() {
// 单个对象上移
if (this.selestMoveList.length === 1) {
let index = this.systemTagList.indexOf(this.selestMoveList[0]);
this.systemTagList.splice(index, 1);
this.systemTagList.splice(index - 1, 0, this.selestMoveList[0]);
this.oneIndex--;
} else {
// 多个对象上移
// 先删除选中的对象
this.systemTagList.splice(this.indexList[0], this.indexList.length);
let count = this.selestMoveList.length - 1;
for (let i = this.indexList[0]; i <= this.indexList[this.indexList.length - 1]; i++) {
this.systemTagList.splice(i - 1, 0, this.selestMoveList[this.selestMoveList.length - 1 - count]);
count--;
}
for (let i = 0; i < this.indexList.length; i++) {
this.indexList[i] = this.indexList[i] - 1;
}
this.isZero = this.indexList.indexOf(0) === -1 ? false : true;
}
this.isBottom = false;
},
// 下移
moveDown() {
if (this.selestMoveList.length === 1) {
// 单选下移操作
let index = this.systemTagList.indexOf(this.selestMoveList[0]);
this.systemTagList.splice(index, 1);
this.systemTagList.splice(index + 1, 0, this.selestMoveList[0]);
this.oneIndex++;
} else {
this.systemTagList.splice(this.indexList[0], this.indexList.length);
let count = 0;
for (let i = this.indexList[0]; i <= this.indexList[this.indexList.length - 1]; i++) {
this.systemTagList.splice(i + 1, 0, this.selestMoveList[count]);
count++;
}
for (let i = 0; i < this.indexList.length; i++) {
this.indexList[i] = this.indexList[i] + 1;
}
this.isBottom = this.indexList.indexOf(this.systemTagList.length - 1) === -1 ? false : true;
this.move = '下移';
}
this.isZero = false;
},
// 置顶
moveTop() {
if (this.selestMoveList.length === 1) {
let index = this.systemTagList.indexOf(this.selestMoveList[0]);
this.systemTagList.splice(index, 1);
this.systemTagList.unshift(this.selestMoveList[0]);
this.oneIndex = 0;
} else {
for (let i = this.selestMoveList.length - 1; i >= 0; i--) {
let index = this.systemTagList.indexOf(this.selestMoveList[i]);
this.systemTagList.splice(index, 1);
this.systemTagList.unshift(this.selestMoveList[i]);
}
for (let i = 0; i < this.indexList.length; i++) {
this.indexList[i] = i;
}
}
this.isZero = true;
this.isBottom = false;
},
// 置底
moveBottom() {
if (this.selestMoveList.length === 1) {
let index = this.systemTagList.indexOf(this.selestMoveList[0]);
this.systemTagList.splice(index, 1);
this.systemTagList.push(this.selestMoveList[0]);
this.oneIndex = this.systemTagList.length - 1;
} else {
for (let i = 0; i < this.selestMoveList.length; i++) {
let index = this.systemTagList.indexOf(this.selestMoveList[i]);
this.systemTagList.splice(index, 1);
this.systemTagList.push(this.selestMoveList[i]);
}
var addCount = 0;
let copeindexList = Object.assign([], this.indexList);
for (let i = this.systemTagList.length - 1; i > 0; i--) {
this.indexList[addCount] = i;
addCount++;
if (addCount === copeindexList.length) {
break;
}
}
// 正序排序
this.indexList.sort(function (x, y) {
return x - y;
});
}
this.isBottom = true;
this.isZero = false;
},
// 保存
saveSort() {
let ids = [];
this.systemTagList.forEach((item) => {
ids.push(item.id);
});
// 必须等接口调用完成后才能刷新列表
this.$api.Metadata.editAttributeGroupSort({
ids: ids,
}).then(() => {
this.$message.success('保存成功');
// 重新获取表格数据进行刷新
this.getAttributeGroupList();
// 刷新选项组列表
eventBus.$emit('getAttributeSelectList');
});
},
