Element UI表格行拖拽功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<template>
<div class="hello">
<!-- 拖拽功能必须绑定row-key唯一 -->
<el-table
ref="dragTable"
:data="tableData"
style="width: 100%"
row-key="id"
>
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
<script>
import { Table, TableColumn } from 'element-ui'
// 引用第三方拖拽插件
import Sortable from 'sortablejs'
export default {
name: 'HelloWorld',
components: {
ElTable: Table,
ElTableColumn: TableColumn
},
data () {
return {
tableData: [
{
id: 0,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 1,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 2,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 3,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
sortable: null,
newList: []
}
},
mounted () {
//这里我是在mounted中调用了拖拽方法,一般获取到表格数据后nextTick中就可以调用拖拽方法
this.setSort()
},
methods: {
setSort () {
const el = this.$refs.dragTable.$el.querySelectorAll(
'.el-table__body-wrapper > table > tbody'
)[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function (dataTransfer) {
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.tableData.splice(evt.oldIndex, 1)[0]
this.tableData.splice(evt.newIndex, 0, targetRow)
const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
this.newList.splice(evt.newIndex, 0, tempIndex)
}
})
}
}
}
</script>
<style>
.sortable-ghost {
opacity: 0.8;
color: #fff !important;
background: #b0c4de !important;
}
</style>
<style scoped>
.icon-star {
margin-right: 2px;
}
.drag-handler {
width: 20px;
height: 20px;
cursor: pointer;
}
.show-d {
margin-top: 15px;
}
</style>
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
8 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 8 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)