当前位置： 移动技术网 > IT编程>开发语言>JavaScript > VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序

VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序

2018年09月29日  | 移动技术网IT编程  | 我要评论

邮箱地址,黑道之财色无双,皇太子的初恋下载

sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）

 

项目需求是要求能对element中 的table进行拖拽行排序

这里用到了sorttable 

sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）

官方demo：

 

安装步骤：

npm install sortablejs --save

 

在.vue中的js部分（需要用到sorttable的vue文件中）引入  也可以 在main.js中引入注册到vue的根实例中

import sortable from 'sortablejs'

html 部分

<el-table :data="tabledata"
                      border
                      width="100%"
                      row-key="id"
                      align="left"
                      v-show="showdictitem">
                      <el-table-column width="50px">
                          <template slot-scope="scope">
                              <el-button type='text' v-show="scope.row.defaultvalue === 1">默认</el-button>
                          </template>
                      </el-table-column>
                      <el-table-column
                          width="60px"
                          label="序号"
                          type="index">
                    </el-table-column>
                     <el-table-column v-for="(item, index) in col"
                        :key="`col_${index}`"
                        :prop="dropcol[index].prop"
                        :label="item.label"> 
                      </el-table-column>
                      <el-table-column label="操作" min-width="100">
                          <template slot-scope="scope">
                            <el-button
                              size="mini"
                              @click="handleedit(scope.$index, scope.row)">修改</el-button>
                              <el-popover placement="top" v-model="scope.row.visible">
                                  <p>确定要删除当前内容？</p>
                                  <div style="text-align: right; margin: 0">
                                    <el-button size="mini" plain @click="scope.row.visible = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="handledelete(scope.$index, scope.row), scope.row.visible = false">确定</el-button>
                                  </div>
                                  <el-button
                                      size="mini"
                                      type="danger"
                                      slot="reference">删除</el-button>
                              </el-popover>
                              
                            
                              <el-button
                              size="mini"
                              type="primary"
                              @click="handledefault(scope.$index, scope.row)" v-show="scope.row.defaultvalue === 0">默认</el-button>
                              <el-button
                              size="mini"
                              type="primary"
                              @click="handledefault(scope.$index, scope.row)" v-show="scope.row.defaultvalue === 1">取消</el-button>
                          </template>
                      </el-table-column>
                </el-table>

data 部分

col: [
                    
                    {
                      label: '值',
                      prop: 'datakey'
                    },
                    {
                      label: '显示名',
                      prop: 'datavalue'
                    }
                  ],
                  dropcol: [
                      
                    {
                      label: '值',
                      prop: 'datakey'
                    },
                    {
                      label: '显示名',
                      prop: 'datavalue'
                    }
                  ],
                  tabledata: [],

methos

//行拖拽
            rowdrop() {
              const tbody = document.queryselector('.el-table__body-wrapper tbody')
              const _this = this
              sortable.create(tbody, {
                onend({ newindex, oldindex }) {
                  const currrow = _this.tabledata.splice(oldindex, 1)[0]
                  _this.tabledata.splice(newindex, 0, currrow)
                }
              })
            },
            //列拖拽
            columndrop() {
              const wrappertr = document.queryselector('.el-table__header-wrapper tr')
              this.sortable = sortable.create(wrappertr, {
                animation: 180,
                delay: 0,
                onend: evt => {
                  const olditem = this.dropcol[evt.oldindex]
                  this.dropcol.splice(evt.oldindex, 1)
                  this.dropcol.splice(evt.newindex, 0, olditem)
                }
              })
            },

这样就可以实现基本的行拖拽和列拖拽了

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网