<el-row>
上移至第<el-input v-model="site" @keyup.native="handleNumber" @keyup.enter="handleMove"></el-input>个
<img src="../assets/enter.png" @click="handleMove">
</el-row>
<el-table ref="selectTable" :data="tableData" :row-class-name="tableRowClassName" @row-click="handleSelect">
<el-table-column type="index" width="40"></el-table-column>
<el-table-column sortable prop="name" label="name" :sort-method="sortChinese"></el-table-column>
<el-table-column sortable prop="capacity" label="capacity"></el-table-column>
</el-table>
var vm = new Vue({
el: "#app",
data: {
tableData: [
{ name: '中心实验柜', capacity: 30, status: 'empty' },
{ name: '柜子', capacity: 26, status: 'empty' },
{ name: '化学品柜', capacity: 22, status: 'empty' },
{ name: '危险品', capacity: 36, status: 'empty' }
],
currentRow: '',
site: ''
},
computed: {
// 加index
tableRowClassName({row, rowIndex}) {
row.index = rowIndex;
},
// 中文排序
sortChinese(param1, param2) {
return param1['name'].localeCompare(param2['name']);
},
// 选中
handleSelect(row) {
this.currentRow = row;
},
// 只能输入正整数
handleNumber() {
this.site = this.site.replace(/[^\.\d]/g,'');
this.site = this.site.replace('.','');
if (this.site < 1) {
this.site = '';
}
},
ArrayHasObjectIndex(_item) {
for (var i in this.$refs.selectTable.tableData) {
if (this.$refs.selectTable.tableData[i].id === _item.id) {
return i;
}
}
return -1;
},
// 移动到第几个
handleMove() {
if (!this.currentRow) {
this.$message.error('您还没有选择需要移动的数据');
return false;
}
this.$refs.selectTable.tableData.splice(this.ArrayHasObjectIndex(this.currentRow), 1);
this.$refs.selectTable.tableData.splice(this.site-1, 0, this.currentRow);
this.site = '';
},
// 上移
handleUpper(index, row) {
if (index > 0) {
let upDate = this.$refs.selectTable.tableData[index - 1];
this.$refs.selectTable.tableData.splice(index - 1, 1);
this.$refs.selectTable.tableData.splice(index, 0, upDate);
} else {
this.$message.error('已经是第一条，不可上移');
}
},
//下移
handleLower(index, row) {
if ((index + 1) === this.$refs.selectTable.tableData.length) {
this.$message.error('已经是最后一条，不可下移');
} else {
let downDate = this.$refs.selectTable.tableData[index + 1];
this.$refs.selectTable.tableData.splice(index + 1, 1);
this.$refs.selectTable.tableData.splice(index, 0, downDate);
}
},
// 移除
handleDelete(index, rows) {
this.$confirm('确定移除该数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$refs.selectTable.tableData.splice(index, 1);
this.$message({type: 'success', message: '移除成功!'});
}).catch(() => {});
}
}
})
