【Vue2 + ElementUI】实现表格拖拽功能及行大图预览
<template>
<el-row>
<el-col :offset="0" :span="18">
<el-table
id="dragTable"
ref="table"
border
:data="list"
:height="$baseTableHeight(1)"
style="width: 100%"
>
<el-table-column type="selection" width="55" />
<el-table-column label="#" type="index" />
<el-table-column label="名称" prop="originalName" />
<el-table-colum label="图片">
<template slot-scope="{ row }">
<div @click="handlePriview()">
<el-image alt="" :preview-src-list="srcList" :src="" width="100%" />
</div>
</template>
</el-table-colum>
<el-table-column label="操作" width="300">
<template slot-scope="{ row }">
<el-button
icon="el-icon-view"
type="text"
@click="handlePreview(row)"
>
预览
</el-button>
</template>
</el-table-column>
<!--数据为空时的处理，加一张图片提示-->
<template #empty>
<el-image
class="vab-data-empty"
:src="require('@/assets/empty_images/data_empty.png')"
/>
</template>
</el-table>
</el-col>
</el-row>
</template>
<script>
// 引入排序接口
import {
getList,
updateSort,
} from '@/api/archive/archiveFile'
// 引入树组件
import ArchiveFileCategoryTreeVue from '@/component/'
export default {
data() {
return {
list: [],
archiveFileId: null,
srcList: [],
}
},
methods: {
// 初始化列表数据
fetchData() {
getList(1, 999, ).then((res) => {
=
})
},
// 点击树，切换节点
nodeClick(row) {
// 调用拖拽方法，如果id == '0'即为【全部】不可拖拽，否则可拖拽
()
()
},
// 行拖拽
handleDropPicture(id) {
if (id != '0') {
this.$nextTick(() => {
// 要拖拽元素的父容器
= ('#dragTable tbody')
const _this = this
if (_this.tbody) {
_this.sortable = (_this.tbody, {
// 指定父元素下可拖拽的子元素
handle: '.el-table__row',
animation: 150,
onEnd: ({ newIndex, oldIndex }) => {
const currRow = _this.(oldIndex, 1)[0]
_this.(newIndex, 0, currRow)
_this.((e, index) => {
= index
})
//减少数据传输量
let newArray = _this.((e) => {
return {
id: ,
sort: ,
}
})
// 调用接口
updateSort(newArray).then((res) => {
this.$baseMessage(
,
? 'success' : 'error'
)
// 刷新页面
()
})
},
})
}
})
} else {
//点击全部时关掉排序
()
}
},
// 预览功能
handlePriview(link){
(link)
}
}
}