el-table表头自定义总计

el-table表头自定义总计

npm i -S vuedraggable

<template>
  <div class="content">
    <div class="header">在表格上面写总计</div>
    <el-table :data="tableData" :span-method="arraySpanMethod" border>
      <el-table-column
        :prop="item.value"
        :label="item.title"
        v-for="(item, index) in tabelHeader"
        :key="index"
        align="center"
        :fixed="
          item.value == 'id' || item.value == 'name' || item.value == 'gender'
        "
        min-width="100"
      ></el-table-column>
    </el-table>
    <div class="sort" @click="goSort">排序</div>

    <div class="index" @click="goIndex">排序页</div>

    <el-dialog title="排序" :visible.sync="showSort" width="700px" center>
      <div class="sortBox">
        <div class="leftBox">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group
            v-model="checkedData"
            @change="handleCheckedDataChange"
          >
            <el-checkbox
              v-for="(item, index) in headerData"
              :label="item.title"
              :key="index"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="rightBox">
          <draggable v-model="selectedSort" :options="dragOptions">
            <transition-group tag="div" class="item-ul">
              <div v-for="item in selectedSort" class="drag-list" :key="item">
                {{ item }}
              </div>
            </transition-group>
          </draggable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submit">确 定</el-button>
        <el-button size="small" @click="cancelSubmit">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "merge",
  components: {
    draggable,
  },
  data() {
    return {
      showSort: false,
      checkAll: false,
      isIndeterminate: true,
      checkedData: [], //选择了的数据
      selectedSort: [], //选择后排序的数据
      tabelHeader: [],
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          gender: "男",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987123",
          name: "王小虎",
          gender: "男",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987124",
          name: "王小虎",
          gender: "男",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987125",
          name: "王小虎",
          gender: "男",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987126",
          name: "王小虎",
          gender: "男",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
      ],
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style",
      },
      headerData: [
        {
          title: "ID",
          value: "id",
        },
        {
          title: "姓名",
          value: "name",
        },
        {
          title: "性别",
          value: "gender",
        },
        {
          title: "数值1",
          value: "amount1",
        },
        {
          title: "数值2",
          value: "amount2",
        },
        {
          title: "数值3",
          value: "amount3",
        },
      ],
      allSelectList: [],
      mergeArr: [],//固定的
    };
  },
  created() {
    // 因为不确定会选择哪几个固定在左侧，所以就先都写总计
    let obj = {};
    obj.id = "总计";
    obj.name = "总计";
    obj.gender = "总计";
    obj.amount1 = "1";
    obj.amount2 = "2";
    obj.amount3 = "3";
    this.tableData.unshift(obj);

    this.headerData.forEach((el) => {
      this.checkedData.push(el.title);
      this.allSelectList.push(el.title);
    });
    this.tabelHeader = this.headerData;
    this.selectedSort = this.checkedData;
    this.handleCheckedDataChange(this.checkedData);

    this.mergeLine()
  },
  methods: {
    goSort() {
      this.showSort = true;
    },
    handleCheckAllChange(val) {
      this.checkedData = val ? this.allSelectList : [];
      this.selectedSort = val ? this.allSelectList : [];
      this.isIndeterminate = false;
    },
    handleCheckedDataChange(val) {
      let checkedCount = val.length;
      this.selectedSort = val;
      this.checkAll = checkedCount === this.headerData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.headerData.length;
    },
    submit() {
      this.tabelHeader = [];
      this.selectedSort.forEach((item) => {
        this.headerData.forEach((el) => {
          if (item == el.title) {
            this.tabelHeader.push(el);
          }
        });
      });
      this.showSort = false;
      this.mergeLine()
    },
    cancelSubmit() {
      this.selectedSort = this.checkedData;
      this.showSort = false;
    },

    
    // 合并几格
    mergeLine() {
      let arr = [
        "id",
        "name",
        "gender",
      ];
      this.mergeArr = [];
      arr.forEach((el) => {
        this.tabelHeader.forEach((item) => {
          if (el == item.value) {
            this.mergeArr.push(el);
          }
        });
      });
    },
    // 合并合计第一行
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        if (this.mergeArr.length >= 1) {
          if (columnIndex === 0) {
            return [1, this.mergeArr.length];
          }
        }
        if (this.mergeArr.length >= 2) {
          if (columnIndex === 1) {
            return [0, 0];
          }
        }
        if (this.mergeArr.length >= 3) {
          if (columnIndex === 2) {
            return [0, 0];
          }
        }
      }
    },

    // 跳转到首页
    goIndex() {
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.content {
  width: 100%;
}
.header {
  margin-bottom: 20px;
}
.content .el-table {
  width: 500px;
  margin: 0 auto;
}
.sort {
  position: absolute;
  right: 10%;
  top: 20px;
  color: #409eff;
  cursor: pointer;
}
.sortBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 300px;
}
.sortBox .leftBox {
  width: 300px;
  border: 1px solid #ebeef5;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
}
.sortBox .leftBox label {
  margin-bottom: 15px;
}
.sortBox .rightBox {
  border: 1px solid #ebeef5;
  width: 300px;
  padding: 15px;
  box-sizing: border-box;
  border-radius: 5px;
  overflow-y: auto;
}
.rightBox .defaultSort {
  position: absolute;
  top: -27px;
  right: 165px;
  cursor: pointer;
  height: auto;
}
.rightBox .defaultSort:hover {
  color: #409eff;
}
.rightBox .drag-list {
  border: 1px #e1e4e8 solid;
  padding: 10px;
  margin: 0 15px 15px;
  list-style: none;
  background-color: #fff;
  border-radius: 6px;
  cursor: pointer;
  -webkit-transition: border 0.3s ease-in;
  transition: border 0.3s ease-in;
}
.rightBox .drag-list:hover {
  border: 1px solid #20a0ff;
}

.index {
  position: fixed;
  bottom: 10%;
  left: 10%;
  color: #20a0ff;
  cursor: pointer;
}
</style>

地址：https://github.com/deviljj/vueDrag