基于el-table封裝的可拖拽行列、選擇列組件的實現

更新時間：2021年12月21日 11:11:26 作者：渣渣小黃在線學習

本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實現，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

效果

需要環(huán)境

需配置屬性

示例

<HTable
  :columns="columns"
  :data="list"
  :setColumn="true"
  tableKey="CategoriesList"
  style="width: 100%"
  border
>
  // 這里可以放插槽
  <template slot="create_time" slot-scope="scope">
    {{ scope.column.label + scope.item.prop }}
  </template>
  <template slot="action" slot-scope="scope">
    <el-button type="primary" @click="handleEdit(scope.row)" size="small">
      編輯
    </el-button>
    <el-button @click="handleDelete(scope.row)" type="danger" size="small">
      刪除
    </el-button>
  </template>
</HTable>
import HTable from "@/components/HTable";

export default {
  components: { HTable },
  data() {
    return {
      list: [],
      columns: [
        {
          label: "ID", // 描述
          prop: "_id", // 列的唯一值。 必須要有
          checked: true // 是否展示該列
          ... // 一些el-table-column的屬性都可以寫在這里
        },
        {
          label: "分類名稱",
          prop: "name",
          checked: true
        },
        {
          label: "上級分類",
          prop: "parent.name",
          checked: true
        },
        {
          label: "狀態(tài)",
          prop: "status",
          width: "100",
          checked: true
        },
        {
          label: "創(chuàng)建時間",
          prop: "create_time",
          slotHeaderName: "create_time", // 自定義表頭
          checked: true
        },
        {
          label: "操作",
          prop: "action",
          fixed: "right",
          "min-width": "100",
          slotName: "action", // 自定義單元格插槽
          checked: true,
          disabled: true
        }
      ]
    };
  }
};

有用到的話給我點個贊！附組件代碼

<template>
  <div class="HTable">
    <div class="settingBox" v-if="setColumn">
      <el-popover
        placement="bottom-end"
        trigger="click"
        popper-class="settingPopper"
      >
        <el-checkbox-group
          v-model="selectCol"
          @change="handleChangeSelectColumn"
        >
          <el-checkbox
            v-for="item in col"
            :key="item.prop"
            :label="item.prop"
            :disabled="item.disabled"
            style="display:block;line-height:2;margin-right:0;"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
        <i class="icon el-icon-setting" slot="reference"></i>
      </el-popover>
    </div>
    <el-table
      v-bind="$attrs"
      :data="tableData"
      v-on="$listeners"
      :key="JSON.stringify(checkedCol)"
    >
      <el-table-column
        v-for="(item, index) in checkedCol"
        :key="item.prop"
        v-bind="item"
        :index="index"
        :column-key="item.prop"
      >
        <template v-if="item.slotHeaderName" v-slot:header="scope">
          <slot :name="item.slotHeaderName" v-bind="scope" :item="item"></slot>
        </template>
        <template v-if="item.slotName" v-slot:default="scope">
          <slot :name="item.slotName" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  name: "HTable",
  props: {
    tableKey: String,
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    setColumn: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    columns: {
      handler(newVal) {
        let localVal = this.getStorageCol();
        let hotVal = [];
        if (localVal) {
          hotVal = this.dataDiff(newVal, localVal);
        } else {
          hotVal = [...newVal];
        }
        this.col = hotVal.map(
          (item, index) =>
            (item = { ...item, index, checked: item.checked || false })
        );
        this.checkedCol = this.checkedColFun(this.col);
        this.selectCol = this.checkedCol.map(item => (item = item.prop));
      },
      immediate: true
    },
    data: {
      handler(newVal) {
        this.tableData = [...newVal];
      },
      immediate: true
    },
    col: {
      handler(newVal) {
        this.setStorageCol(newVal);
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      tableData: [],
      col: [],
      checkedCol: [],
      selectCol: []
    };
  },

  mounted() {
    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.$nextTick(() => {
      this.rowDrop();
      this.columnDrop();
    });
  },
  methods: {
    drap() {
      this.$nextTick(() => {
        this.rowDrop();
        this.columnDrop();
      });
    },

    handleChangeSelectColumn() {
      this.col.forEach(item => {
        if (this.selectCol.includes(item.prop)) {
          item.checked = true;
        } else {
          item.checked = false;
        }
      });
      this.checkedCol = this.checkedColFun(this.col);
      this.drap();
    },

    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      Sortable.create(tbody, {
        onEnd: ({ newIndex, oldIndex }) => {
          [this.tableData[newIndex], this.tableData[oldIndex]] = [
            this.tableData[oldIndex],
            this.tableData[newIndex]
          ];
          this.drap();
          this.$emit("dropRow", {
            drapRow: this.tableData[oldIndex],
            targetRow: this.tableData[newIndex],
            drapRowIndex: oldIndex,
            targetRowIndex: newIndex,
            data: this.tableData
          });
        }
      });
    },
    columnDrop() {
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: ({ newIndex, oldIndex }) => {
          const oldItem = this.checkedCol[oldIndex];
          const newItem = this.checkedCol[newIndex];
          [this.col[newItem.index].index, this.col[oldItem.index].index] = [
            oldItem.index,
            newItem.index
          ];
          this.col.sort((a, b) => {
            return a.index - b.index;
          });
          this.checkedCol = this.checkedColFun(this.col);
          this.tableData = this.tableData.slice(0, this.tableData.length);
          this.drap();
          this.$emit("dropCol", {
            colItem: oldItem,
            newIndex: newIndex,
            oldIndex: oldIndex,
            column: this.checkedCol
          });
        }
      });
    },
    checkedColFun(arr) {
      return arr.filter(item => item.checked);
    },
    setStorageCol(data) {
      if (this.tableKey && data && data.length > 0) {
        localStorage.setItem("HTable-" + this.tableKey, JSON.stringify(data));
      }
    },
    getStorageCol() {
      let datajson = localStorage.getItem("HTable-" + this.tableKey);
      return datajson ? JSON.parse(datajson) : "";
    },
    dataDiff(newVal, localVal) {
      let nl = newVal.length;
      let ll = localVal.length;
      if (nl != ll) {
        return newVal;
      } else {
        let np = newVal.map(item => item.prop).sort();
        let lp = localVal.map(item => item.prop).sort();
        if (np.join() != lp.join()) {
          return newVal;
        } else {
          let nnl = [];
          for (let i = 0; i < localVal.length; i++) {
            const item_l = localVal[i];
            for (let j = 0; j < newVal.length; j++) {
              const item_n = newVal[j];
              if (item_l.prop === item_n.prop) {
                nnl.push({
                  ...item_n,
                  index: item_l.index
                });
              }
            }
          }
          return nnl;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
.HTable {
  position: relative;
  .settingBox {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    border: 1px solid #ebeef5;
    border-bottom: 0;
    margin-left: auto;
    position: relative;
    .icon {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 36px;
      height: 36px;
      text-align: center;
      font-size: 20px;
      line-height: 36px;
      color: #909399;
      cursor: pointer;
    }
  }
}
</style>
<style lang="less">
.settingPopper {
  min-width: 100px !important;
}
</style>

到此這篇關于基于el-table封裝的可拖拽行列、選擇列組件的實現的文章就介紹到這了,更多相關el-table 可拖拽行列內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！?

您可能感興趣的文章:

vue使用AES.js的步驟詳解
AES對數據傳輸加密、解密處理---AES.js，下面分步驟給大家介紹vue使用AES.js的示例代碼，感興趣的朋友跟隨小編一起看看吧
2021-10-10
Vue實現類似Spring官網圖片滑動效果方法
這篇文章主要介紹了Vue實現類似Spring官網圖片滑動效果方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
詳解Vue用自定義指令完成一個下拉菜單（select組件）
本篇文章主要介紹了詳解Vue用自定義指令完成一個下拉菜單（select組件），小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
web面試vue自定義組件及調用方式
這篇文章主要介紹了web面試中常問到的關于vue自定義組件及調用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步
2021-09-09
vue之延時刷新實例
今天小編就為大家分享一篇vue之延時刷新實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue3插槽(slot)使用方法詳解
在VUE開發(fā)項目的過程中,插槽<slot>是重要的承載分發(fā)內容的出口,下面這篇文章主要給大家介紹了關于Vue3插槽(slot)使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11
解決vue watch數據的方法被調用了兩次的問題
這篇文章主要介紹了解決vue watch數據的方法被調用了兩次的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue如何實現點擊選中取消切換
這篇文章主要介紹了vue實現點擊選中取消切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
解決vue.js not detected的問題
本文主要介紹了解決vue.js not detected的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
如何使用HBuilderX把vue項目打包成apk
這篇文章主要介紹了如何使用HBuilderX把vue項目打包成apk，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07