Vue.js中el-table表格自定義列控制與拖拽

更新時間：2023年05月23日 09:20:25 作者：Kier

本文主要介紹了Vue.js中el-table表格自定義列控制與拖拽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景

昨天客戶：提了一個需求，你們這個表格的數(shù)據(jù)太亂不是我們重點(diǎn)關(guān)注的，然后列出了一些屬性值A(chǔ)，B，C，D。。。這些必須展示。

前端仔：簡單，30s給你安排上。

今天客戶：你們這個表格的列字段不能拖動呀，我們覺得這個幾個字段才是我們重點(diǎn)關(guān)注的，我要放到前面。。

前端仔：無語，行給你安排。

這些無聊的需求不改又不行，但是自己又不想被他們拖著天天伺候，直接給他們自己可以配置，想咋弄就咋弄。

需求與實現(xiàn)分析（重點(diǎn)）

面對客戶的這些需求，總結(jié)起來也就是2個功能點(diǎn)，一是表格的列可以自由拖拽，二表格可以展示的列數(shù)據(jù)可以進(jìn)行自定義控制?？紤]到組件可能會在很多地方使用，所以使用父子傳值的模式來進(jìn)行數(shù)據(jù)傳輸。

功能實現(xiàn)

自由拖拽：偷個懶直接應(yīng)用別人封裝好的sortable.js。地址：www.sortablejs.com/

引入

npm install sortablejs

使用

import Sortable from "sortablejs";

**列控制：**這里考慮使用leement的多選框組el-check-group，我們先自定義一部分默認(rèn)顯示的數(shù)據(jù)，還有一部分由客戶自己勾選設(shè)置，這樣既可以避免表格內(nèi)容過多，導(dǎo)致出現(xiàn)橫向滾動條的丑陋，也為客戶提供了選擇性。

上組件代碼

<template>
  <div class="myWrap">
    <div class="colum-set">
      <el-popover width="150" placement="bottom-end" trigger="click">
        <div>
          <el-checkbox-group v-model="childCheckedItems" @change="handleCheckedColumChange">
            <el-checkbox v-for="item in tableHeader" :label="item.label" :key="item.label"></el-checkbox>
          </el-checkbox-group>
        </div>
        <el-button slot="reference" size="mini" icon="el-icon-setting">{{ $t('common.column_set') }}</el-button>
      </el-popover>
    </div>
    <el-table :data="tableBody" @selection-change="handleSelectionChange" border row-key="id" :header-cell-style="{
      height: '48px',
      background: '#DFEBF9',
      color: '#606266',
      fontWeight: 'bold',
      fontSize: '14px',
    }">
      <!-- 勾選框列 -->
      <el-table-column type="selection" width="48" fixed v-if="needCheckBox"></el-table-column>
      <!-- 表頭列 -->
      <el-table-column v-for="(item, index) in checkedHeader" :key="index" :prop="item.prop" :label="item.label"
        width="auto" show-overflow-tooltip>
      </el-table-column>
      <!-- 表格操作 -->
      <el-table-column :width="tableOperate.width" :label="tableOperate.label" fixed="right" v-if="tableOperate.show">
        <template slot-scope="scope">
          <slot name="tablerow" :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// 引入sortablejs插件，拖拽主要靠的是這個插件
import Sortable from "sortablejs";
export default {
  props: {
    tableBody: {
      required: true,
      type: Array
    },
    tableHeader: {
      type: Array,
      required: true
    },
    needCheckBox: {
      required: true,
      type: Boolean
    },
    tableOperate:{
      required:true,
      type:Object
    }
  },
  data() {
    return {
      checkedHeader: [],
      childCheckedItems: []
    };
  },
  watch: {
    '$store.state.common.lang': function (val) {
      window.location.reload()
    },
    tableHeader: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.checkedHeader = newVal.filter(item => item.show == true)
        this.childCheckedItems = this.checkedHeader.map(item => {
          return item.label
        })
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // 列的拖拽初始化
    this.columnDropInit();
  },
  methods: {
    //列拖拽
    columnDropInit() {
      // 第一步，獲取列容器
      const wrapperColumn = document.querySelector(
        ".el-table__header-wrapper tr"
      );
      // 第二步，給列容器指定對應(yīng)拖拽規(guī)則
      this.sortable = Sortable.create(wrapperColumn, {
        animation: 200,
        delay: 0,
        onEnd: (event) => {
          console.log(
            "根據(jù)舊索引和新索引去更新，其實就是交換位置",
            event.oldIndex,
            event.newIndex
          );
          // 接下來做索引的交換
          let tempHableHeader = [...this.checkedHeader]; // 先存一份臨時變量表頭數(shù)據(jù)
          let temp; // 臨時變量用于交換
          // 這里預(yù)留一個變量，因為表頭前加了表格多選，且固定。那么得-1，如果還有2列，則-2，以此類推
          temp = tempHableHeader[event.oldIndex - this.control_index]; 
          tempHableHeader[event.oldIndex - this.control_index] =
            tempHableHeader[event.newIndex - this.control_index]; 
          tempHableHeader[event.newIndex - this.control_index] = temp;
          // 這里一定要先把表頭數(shù)據(jù)清空，然后再下一輪中去賦值，bug處理
          this.checkedHeader = []
          this.$nextTick(() => {
            this.checkedHeader = tempHableHeader
            this.childCheckedItems = this.checkedHeader.map(item => {
              return item.label
            })
          })
        },
      });
    },
    handleCheckedColumChange(value) {
      this.$emit('changeCheckedColum', value)
    },
    handleSelectionChange(value){
      console.log(value)
    }
  },
};
</script>
<style lang='stylus' scoped>
.myWrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .colum-set{
    float: right;
  }
  /deep/ .el-table {
    .el-table__header-wrapper {
      tr {
        th {
          cursor: move;
        }
      }
    }
  }
}
.check-colum-div{
  width: 150px;
  display: flex;
  flex-direction: column;
}
</style>

父組件核心代碼

<template>
    <MyTable :tableBody="matlist" :tableHeader="tableHeader" :needCheckBox="true" :tableOperate="tableOperate"
    @changeCheckedColum="changeCheckedColum" >
    <template v-slot:tablerow="scope">
    <el-button type="primary" size="small" @click="editRow(scope.row)">
    編輯
    </el-button>
    </template>
    </MyTable>
</template>
<script>
tableHeader: [
        { label: this.$t('storage.shelf_id'), prop: 'shelf_id', show: true },
        { label: this.$t('storage.save_id'), prop: 'save_id', show: false },
        { label: this.$t('storage.label_code'), prop: 'label_code', show: true },
        { label: this.$t('storage.part_num'), prop: 'part_num', show: true },  
        { label: this.$t('storage.lot_code'), prop: 'lot_code', show: true },
        { label: this.$t('storage.quantity'), prop: 'quantity', show: true },
        { label: this.$t('storage.description'), prop: 'description', show: true },
        { label: this.$t('storage.supplier_name'), prop: 'supplier_name', show: true },
        { label: this.$t('storage.mfg_date'), prop: 'mfg_date', show: true },
        { label: this.$t('storage.in_time'), prop: 'in_time', show: true },
        { label: this.$t('storage.position'), prop: 'position_info', show: true },
        { label: this.$t('storage.category_name'), prop: 'category_name', show: false },
        { label: this.$t('storage.warehouse_name'), prop: 'warehouse_name',show:false },
      ],
      tableOperate:{
        show:true,
        width:120,
        label:this.$t('common.operation')
      },
</script>

核心代碼分析（重點(diǎn)）

columnDropInit()，該方法由sortable提供，實現(xiàn)了表格的拖拽功能，我這里只寫了列拖拽，行拖拽可以自己在官網(wǎng)查看。

watch中的tableHeader，為什么要這么做？因為表頭所展示的數(shù)據(jù)，和多選框中被選中項是響應(yīng)關(guān)系，勾選與取消的同時需要相應(yīng)到表格列的變化。其次表頭綁定的是對象數(shù)組，額checkbox綁定值只能是字符串或者數(shù)字，原本想直接綁定個對象數(shù)組的計劃泡湯，這是elementui設(shè)計決定的。（從elementui源碼上解決參考：http://m.fzitv.net/javascript/2852009x5.htm)

tableHeader: {
      handler(newVal, oldVal) {
        console.log(newVal)
        this.checkedHeader = newVal.filter(item => item.show == true)
        this.childCheckedItems = this.checkedHeader.map(item => {
          return item.label
        })
      },
      immediate: true,
      deep: true
    }

handleCheckedColumChange，子組件通過$emit觸發(fā)父組件的數(shù)據(jù)變更

handleCheckedColumChange(value) {
      this.$emit('changeCheckedColum', value)
},

父組件數(shù)據(jù)變更，子組件的watch，再次對數(shù)據(jù)進(jìn)行監(jiān)聽改變

 changeCheckedColum(value) {
      this.tableHeader.forEach(item => {
        if (value.includes(item.label)) {
          item.show = true
        } else {
          item.show = false
        }
      })
  },

額外預(yù)留功能點(diǎn)

表格多選

微信截圖_20230512154609.png

<!-- 勾選框列 -->
<el-table-column type="selection" width="48" fixed v-if="needCheckBox"></el-table-column>

上面的勾選框主要用來對表格的的數(shù)據(jù)進(jìn)行多選操作，方便以后預(yù)留使用，通過needCheckBox來控制是否展示，同時子組件監(jiān)聽該屬性，來計算表格拖拽時的偏移量，在columnDropInit方法中有詳細(xì)注釋，計算屬性方法如下：

computed: {
    control_index: function () {
      return this.needCheckBox ? 1 : 0
    },
},

表格操作，增刪查改

微信截圖_20230512160101.png

<!-- 表格操作 子組件-->
<el-table-column :width="tableOperate.width" :label="tableOperate.label" fixed="right" v-if="tableOperate.show">
    <template slot-scope="scope">
    <slot name="tablerow" :row="scope.row"></slot>
    </template>
</el-table-column>
<!--父組件，插槽取值-->
 <template v-slot:tablerow="scope">
       <el-button type="primary" size="small" @click="editRow(scope.row)">
        {{ $t('common.edit') }}
       </el-button>
 </template>

這個插槽預(yù)留，為了方便表格對數(shù)據(jù)的增刪查改，通過插槽傳值，獲取當(dāng)前行的row。

最后

本文主要的是通過，對需求的拆分與理解，從表格的拖拽，以及列控制，衍生出開發(fā)者個人的開發(fā)習(xí)慣，對組建的預(yù)留以及擴(kuò)展，方便以后使用。再技術(shù)上也有多方面的考量，對大都數(shù)開發(fā)者也有一定的學(xué)習(xí)和參考價值。好了，本文到此結(jié)束，希望對你有幫助。

到此這篇關(guān)于Vue.js中el-table表格自定義列控制與拖拽的文章就介紹到這了,更多相關(guān)Vue.js el-table自定義列控制與拖拽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: