Vue element table实现双级排序功能 支持上下移动

原文地址

利用element table的【树形数据】实现的排序,分为两级,第一级是进行城市的排序,第二级是对城市里的项目进行排序,处在第一个和最后一个的元素需要分别设置不可向上和向下操作。


双级排序

需要注意数据的格式,element文档中【树形数据】的tableData和children里的格式需要保持一致,区别是children里不需要children,同时不要存在hasChildren字段,会导致树形数据不能加载,具体数据格式查看Element-table

前端vue代码:

<el-table :data="hotProjectOrderInfoList" v-loading="dialogHotProjectOrderLoading" style="width: 100%;margin-bottom: 20px;" row-key="rowId"

                border :default-expand-all="false" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

        <el-table-column prop="name" label="项目" width="200"> </el-table-column>

        <el-table-column prop="projectId" label="" v-if="false"> </el-table-column>

        <el-table-column prop="projectOrderIndex"  label="排序"> </el-table-column>

        <el-table-column width="150">

          <template slot-scope="scope">

            <el-button v-show="!validateOperate(scope.row, 'up')" @click="handleHotProjectOrder(scope.row, 'up')" size="mini" icon="el-icon-top"></el-button>

            <el-button v-show="!validateOperate(scope.row, 'down')" @click="handleHotProjectOrder(scope.row, 'down')" size="mini" icon="el-icon-bottom"></el-button>

          </template>

        </el-table-column>

      </el-table>

前端JS代码:

//热门项目排序

    handleHotProjectOrder(row, type) {

      let currentProjectOrderIndex = row.projectOrderIndex

      if (row.children && row.children.length != 0) {//有children 则 排城市

        this.hotProjectOrderInfoList.forEach( item => {

          if (type == 'up') {

            if( item.projectOrderIndex == (currentProjectOrderIndex-1) ) {

              item.projectOrderIndex = item.projectOrderIndex + 1

            } else if (item.projectOrderIndex == currentProjectOrderIndex) {

              item.projectOrderIndex = currentProjectOrderIndex - 1

            }

          } else if (type == 'down') {

            if( item.projectOrderIndex == currentProjectOrderIndex ) {

              item.projectOrderIndex = currentProjectOrderIndex + 1

            } else if (item.projectOrderIndex == (currentProjectOrderIndex + 1)) {

              item.projectOrderIndex = currentProjectOrderIndex

            }

          }

        })

        this.hotProjectOrderInfoList.sort(this.projectOrderIndexCompare);

        return;

      }

      //没有children 则 排项目

      this.hotProjectOrderInfoList.forEach(item1 => {

        if (row.cityCode == item1.cityCode) {//

          item1.children.forEach( item => {

            if (type == 'up') {

              if( item.projectOrderIndex == (currentProjectOrderIndex-1) ) {

                item.projectOrderIndex = item.projectOrderIndex + 1

              } else if (item.projectOrderIndex == currentProjectOrderIndex) {

                item.projectOrderIndex = currentProjectOrderIndex - 1

                item1.children.sort(this.projectOrderIndexCompare);//到这步就已经将功能完成了 所以直接排序后return 没必要循环之后的数据

                return

              }

            } else if (type == 'down') {

              if( item.projectOrderIndex == currentProjectOrderIndex ) {

                item.projectOrderIndex = currentProjectOrderIndex + 1

              } else if (item.projectOrderIndex == (currentProjectOrderIndex + 1)) {

                item.projectOrderIndex = currentProjectOrderIndex

                item1.children.sort(this.projectOrderIndexCompare);//到这步就已经将功能完成了 所以直接排序后return 没必要循环之后的数据

                return

              }

            }

          })

        }

      })

    },

    //用于判断热门项目排序的操作按钮是否可用

    validateOperate(row, type) {

      let that = this

      if (row.children && row.children.length != 0) {//有children

        if (type == 'up' && row.projectOrderIndex == 1) {

          return true;

        } else if (type == 'down' && row.projectOrderIndex == this.hotProjectOrderInfoList.length) {

          return true;

        } else {

          return false;

        }

      } else {

        if (type == 'up' && row.projectOrderIndex == 1) {

          return true;

        } else if (type == 'down') {//这里需要找children的length

          return that.getHotProjectCityChildrenLength(row.cityCode, row.projectOrderIndex);

        } else {

          return false;

        }

      }

    },

    //获取某个城市项目的数据 热门项目排序时用到

    getHotProjectCityChildrenLength(cityCode, projectOrderIndex) {

      let result = false;

      this.hotProjectOrderInfoList.forEach(item => {

        if (item.cityCode == cityCode) {

          result = item.children.length == projectOrderIndex;

        }

      })

      return result

    },

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容