<template>
<el-drawer
title="属性排序(上下拖拽表格行即可)"
:visible.sync="dialogVisible"
@close="closeDialog"
:append-to-body="true"
class="scroll"
:wrapperClosable="false"
size="60%">
<el-table
:data="form.properties"
row-key="propertiesKey"
border
stripe
v-loading="loading"
class="sort-table"
style="width: 100%"
>
<el-table-column
label="序号"
type="index"
align="center"
width="50">
</el-table-column>
<el-table-column
label="key"
align="center"
prop="propertiesKey"
>
</el-table-column>
<el-table-column
label="名称："
align="center"
show-overflow-tooltip
prop="title"
>
</el-table-column>
</el-table>
<div class="drawer-footer text-center" style="margin-top: 30px;">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
type="primary"
@click="submit()"
:loading="loading">确 定</el-button>
</div>
</el-drawer>
</template>
<script>
import api from '@/api/version/object_model.js'
import Sortable from 'sortablejs'
export default {
data() {
return {
dialogVisible: false,
loading: false,
form: {
properties: [], // 属性
},
}
},
mounted() {
this.getDetails()
this.dialogVisible = this.show
this.commonModelId = this.info
},
methods: {
// 行拖拽
rowDrop() {
const tbody = document.querySelector('.sort-table tbody')
const _this = this
Sortable.create(tbody, {
// 官网上的配置项,加到这里面来,可以实现各种效果和功能
animation: 150,
ghostClass: 'blue-background-class',
onEnd({ newIndex, oldIndex }) {
const currRow = _this.form.properties.splice(oldIndex, 1)[0]
_this.form.properties.splice(newIndex, 0, currRow)
_this.form.properties.forEach((item, index) => {
item.propSort = index
})
console.log(_this.form.properties)
}
})
},
// 详情
getDetails() {
api.getInfoCommonById({
id: this.commonModelId
}, (data) => {
this.$utils.assignKey(this.form, data.data)
this.rowDrop()
}, (error) => {
console.log(error)
})
},
// 提交
submit() {
},
},
}
</script>
<style lang="scss">
.json-format-content li:nth-child(even) {
background-color: rgb(248, 248, 248);
}
.sort-table {
.el-drawer__body .el-table thead th {
font-size: 33px;
padding: 12px 0;
}
.el-table td, .el-table th {
padding: 20px 0;
font-size: 33px;
}
}
</style>
注意： 我的table加了样式 class=“sort-table”，所以const tbody = document.querySelector(’.sort-table tbody’)，如果你没有新加样式，可以使用：const tbody = document.querySelector(’.el-table__body-wrapper tbody’)
