基于vue2.6及elementui的拖拽表格上下顺序的效果
代码语言:html
所属分类:拖放
代码描述:基于vue2.6及elementui的拖拽表格上下顺序的效果,其中用到了Sortable插件
代码标签: elementui 的 拖拽 表格 上下 顺序 的 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue基于element table表格拖拽</title> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/elementui.css"> <style> .table-wrap { width: 900px; margin: 0 auto; } .table-box { width: 800px; margin: 0 auto; } .table-box h4 { text-align: center; } .datashow-box { overflow: hidden; zoom: 1; } .datashow-box .columndata { float: left; } .datashow-box .rowdata { float: right; } </style> </head> <body> <div id="app"> <!-- vue基于element table表格拖拽 start --> <div class="table-wrap"> <div class="table-box"> <h4>vue基于element table表格拖拽:</h4> <el-table :data="tableData" border stripe row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table> </div> <hr> <div class="datashow-box"> <div class="columndata"> <h4>列拖拽时的数据变化:</h4> <pre style="text-align: left">{{dropCol}}</pre> </div> <div class="rowdata"> <h4>行拖拽时的数据变化:</h4> <pre style="text-align: left">{{tableData}}</pre> </div> </div> </div> <!-- vue基于element table表格拖拽 end --> </div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/Sortable.min.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/elementui.js"></script> <script> new Vue({ el: '#app', data () { return { col: [{ label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' }], dro.........完整代码请登录后点击上方下载按钮下载查看
网友评论0