欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中el-table實現可拖拽移動列和動態(tài)排序字段

 更新時間:2023年12月19日 09:38:15   作者:前端初見  
最近公司需要做個項目,需要拖拽表格和自定義表格字段,本文主要介紹了vue中el-table實現可拖拽移動列和動態(tài)排序字段,具有一定吃參考價值,感興趣的可以了解一下

前言

背景

公司給了一個需求,需要拖拽表格和自定義表格字段,于是我就開始網上沖浪,于是自己封裝了一套方法,分享給大家,有不明白的可以私信我或者發(fā)在評論區(qū)
el-table自帶支持按列排序,但是當用戶需要自己拖拽進行排序時,現有組件無法滿足。
是時候安利五臟俱全的js庫了,SortableJS
簡單易用,官方文檔上有簡單列表排序,多列表相互拖拽,克隆,禁止sorting等多種demo,現在只記錄關于簡單排序的使用方法
SortableJS官網

一、el-table實現可拖拽移動列

需要安裝插件Sortable.js

npm i  sortablejs --save
或者
yarn add sortablejs --save

1.調取接口獲取數據table數據

this.$axios
        .post("personnel/list", formData)
        .then((response) => {
          // console.log(response);
          this.dynamicTableData = response.data;
        }))

接口數據

在這里插入圖片描述

2.參考接口表格字段mock頁面要調整的數據

注意這些數據prop是對應接口的字段的,以下數據的順序會控制頁面顯示順序

動態(tài)表頭數據

export default [
  {
    disabled: true,
    isCheck: true,
    fixed:true,
    width: "100px",
    label: "姓名",
    prop: "name"
  },
  {
    disabled: false,
    isCheck: true,
    width: "180px",
    label: "單位",
    prop: "unitName"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "部門",
    prop: "departmentName"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "性別",
    prop: "sex"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "出生年月",
    prop: "birthday"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "籍貫",
    prop: "places"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "參加工作時間",
    prop: "workTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "行政職務",
    prop: "duty"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "行政職務時間",
    prop: "dutyTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "行政職級",
    prop: "jobGrade"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "行政職級時間",
    prop: "jobGradeTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "110px",
    label: "等級",
    prop: "rank"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "等級時間",
    prop: "rankTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "法律職務",
    prop: "legislation"
  },
  {
    disabled: false,
    isCheck: true,
    width: "140px",
    label: "法律職務時間",
    prop: "legislationTime"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "全日制學歷",
    prop: "fullTimeEducation"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "全日制學位",
    prop: "fullTimeDegree"
  },
  {
    disabled: false,
    isCheck: true,
    width: "80px",
    label: "全日制專業(yè)",
    prop: "fullTimeMajor"
  },
  {
    disabled: false,
    isCheck: true,
    width: "100px",
    label: "政治面貌",
    prop: "politicsStatus"
  },
];

3.引入mock的字段順序h和相關第三方表格拖拽

import Sortable from "sortablejs";
// 引入Sortable表格拖拽插件
import schemas from "./DynamicTableLabels";
// 引入mock的數據

4.el-table渲染相關數據

  • 注意點:
  • el-table組件中的data綁定的是接口字段
  • el-table-column通過遍歷mock的數據渲染prop,lable, 字段和接口數據需要一一對應,這樣就可以實現完成渲染
  • 復選框和序號是固定
    <el-table
      v-if="isShowSchemaTable"
      :data="tableData.list"
      :height="getTableHeight"
      style="margin-bottom: 5px"
      ref="schema-table"
      class="ELtable"
      size="small"
      stripe
      :key="tableKey"
      :row-key="
        (row) => {
          return row.id;
        }
      "
      id="outTable"
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="updateSelection"
    >    
      <!-- 復選框-->
      <el-table-column type="selection" width="55" :reserve-selection="true">
      </el-table-column>
      <el-table-column
        label="序號"
        type="index"
        align="center"
        fixed
        width="50px"
      ></el-table-column>
        <el-table-column
        v-for="(item, index) in schemas"
        v-if="item.isCheck && item.prop !== 'remark'"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        align="center"
      >
        <template slot-scope="sc">
          <div>
            <span v-if="dateFileds.includes(item.prop)">
              {{ getFormatDate(sc.row[item.prop]) }}
            </span>
            <span v-else>{{ sc.row[item.prop] }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

5.el-table拖拽實現

掛載時開始調用列拖拽方法

  async mounted() {
    //表格拖拽方法
    this.columnDrop();
  },

相關方法封裝

    /**
     * 列拖拽
     */
    columnDrop() {
      const _this = this;
      // console.log("數據", this.schemas);
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {
          const empty = 2;
          // 跳過顯示的列數量,如開頭我們用了一個多選框,h和序號 
          const oldItem = this.schemas[evt.oldIndex - empty];
          this.schemas.splice(evt.oldIndex - empty, 1);
          this.schemas.splice(evt.newIndex - empty, 0, oldItem);
          _this.reDrawTable();
          // 每一次拖拽后都要重繪一次
        },
      });
    },
    /**
     * 觸發(fā)表格重繪
     */
    reDrawTable() {
      this.tableKey = Math.random();
      this.$nextTick(() => {
        // this.rowDrop();
        this.columnDrop();
      });
    },

二、el-table表格動態(tài)排序字段

1.根據mock的動態(tài)表頭實現一個控制字段的表格

  • 注意
    • el-table是mock的數據
    • 排序的上移和下移傳入點擊事件傳入索引

      在這里插入圖片描述

    <el-dialog
      title="自定義表格排序順序"
      :visible.sync="dialogVisibleShow"
      append-to-body
      :close-on-click-modal="false"
      width="500px"
      border
      id="uptishi"
    >
      <p style="font-size: 14px; color: red; margin: 0px 0 5px 15px">
        <i style="font-size: 16px" class="el-icon-warning"></i>
        溫馨提示:修改后的結果視圖設置會立即生效
      </p>
      <el-table id="uptable" :data="schemas" ref="curtable" height="500">
        <el-table-column type="index" label="序號" width="80"></el-table-column>
        <el-table-column prop="label" align="cneter" label="列名" width="150">
        </el-table-column>
        <el-table-column label="排序" min-width="150">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="padding: 0"
              :disabled="scope.$index == 0"
              @click="moveUpward(scope.row, scope.$index)"
              >上移</el-button
            >
            <el-button
              type="text"
              style="padding: 0"
              :disabled="scope.$index + 1 == schemas.length"
              @click="moveDown(scope.row, scope.$index)"
              >下移</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

2.相關方法

    /**
     * 表格字段上移方法
     */
    moveUpward(row, index) {
      // schemas 列數據
      if (index > 0) {
        let upData = this.schemas[index - 1];
        this.schemas.splice(index - 1, 1);
        this.schemas.splice(index, 0, upData);
        console.log("移動成功");
      } else {
        console.log("第一條數據");
        this.$message({
          message: "已經是第一條,上移失敗",
          type: "error",
        });
      }
    },

3.表格字段下移方法

    /**
     * 表格字段下移方法
     */
    moveDown(row, index) {
      if (index + 1 == this.schemas.length) {
        this.$message({
          message: "已經是最后一條,下移失敗",
          type: "error",
        });
      } else {
        let downData = this.schemas[index + 1];
        this.schemas.splice(index + 1, 1);
        this.schemas.splice(index, 0, downData);
      }
    },

效果圖:

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

總結

到此這篇關于vue中el-table實現可拖拽移動列和動態(tài)排序字段的文章就介紹到這了,更多相關vue 可拖拽移動列和動態(tài)排序字段內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 關于Vue組件庫開發(fā)詳析

    關于Vue組件庫開發(fā)詳析

    這篇文章主要給大家介紹了關于Vue組件庫開發(fā)的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-07-07
  • vue-router實現嵌套路由的講解

    vue-router實現嵌套路由的講解

    今天小編就為大家分享一篇關于vue-router實現嵌套路由的講解,小編覺得內容挺不錯的,現在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • 淺談Vant-list?上拉加載及下拉刷新的問題

    淺談Vant-list?上拉加載及下拉刷新的問題

    這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue跳轉頁簽傳參并查詢參數的保姆級教程

    vue跳轉頁簽傳參并查詢參數的保姆級教程

    這篇文章主要介紹了vue跳轉頁簽傳參并查詢參數的保姆級教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 路由vue-route的使用示例教程

    路由vue-route的使用示例教程

    這篇文章主要介紹了路由vue-route的使用,本文結合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-12-12
  • Vue中的v-for列表循環(huán)示例詳解

    Vue中的v-for列表循環(huán)示例詳解

    循環(huán)使用v-for指令,v-for指令需要以site in sites形式的特殊語法,sites是源數據數組并且site是數組元素迭代的別名,下面這篇文章主要給大家介紹了關于Vue中v-for列表循環(huán)的相關資料,需要的朋友可以參考下
    2022-11-11
  • vue中路由參數傳遞可能會遇到的坑

    vue中路由參數傳遞可能會遇到的坑

    這篇文章主要給大家介紹了關于vue中路由參數傳遞遇到的坑的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。
    2017-12-12
  • vue彈窗父子組件調用問題示例詳解

    vue彈窗父子組件調用問題示例詳解

    這篇文章主要介紹了vue彈窗父子組件調用問題,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • 基于vue.js組件實現分頁效果

    基于vue.js組件實現分頁效果

    這篇文章主要為大家詳細介紹了基于vue.js組件實現分頁效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • vue 項目引入echarts 添加點擊事件操作

    vue 項目引入echarts 添加點擊事件操作

    這篇文章主要介紹了vue 項目引入echarts 添加點擊事件操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09

最新評論