自定義列頭模塊

文檔官網：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

在列頭上，有時候顯示的title信息并不能滿足我們想要顯示的內容，這個時候查看文檔，發現了自定義模塊，使用插槽可以幫助我們實現自定義模板內容

使用slots

在插槽內容可以自定義模板，用css設置顯示的樣式

<template>
  <div>
    <vxe-grid border show-overflow ref="xGrid" height="500">
      <template #name_header="{ column }">
        <div class="slotBox">
          <p class="titleBox1">{{ "@" }}</p>
          <p class="titleBox2">{{ column.title }}</p>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>
<script>
// import axios from 'axios'
// import request from '../libs/request'
export default {
  data () {
    return {
      loading: false
    }
  },
  created () {
    this.loadColumnAndData()
  },
  methods: {
    loadColumnAndData () {
      this.loading = true
      Promise.all([this.mockColumns(), this.mockList()]).then((rest) => {
        const columns = rest[0]
        const data = rest[1]
        const startTime = Date.now()
        const xGrid = this.$refs.xGrid
        console.log(xGrid)
        // 使用函數式加載，阻斷 vue 對大數組的雙向綁定
        if (xGrid) {
          Promise.all([
            xGrid.reloadColumn(columns),
            xGrid.reloadData(data)
          ]).then(() => {
            console.log(this.$refs.xGrid.getTableData())
            this.$XModal.message({
              content: `渲染成功，用時 ${Date.now() - startTime}毫秒`,
              status: 'info'
            })
            this.loading = false
          })
        }
      })
    },
    mockColumns (size) {
      return new Promise((resolve) => {
        const cols = [
          {
            width: 60,
            allowEmpty: false,
            type: 'seq',
            sortable: 'sortable',
            title: '#',
            field: '#',
            align: 'center'
          },
          {
            width: 100,
            allowEmpty: false,
            field: 'name',
            title: '姓名',
            align: 'center'
          },
          {
            width: 100,
            allowEmpty: false,
            field: 'sex',
            title: '性別',
            align: 'center'
          },
          {
            width: 100,
            allowEmpty: false,
            field: 'address',
            title: '地址',
            slots: { header: 'name_header' },
            align: 'center'
          },
          {
            width: 100,
            allowEmpty: false,
            field: 'phone',
            title: '電話',
            slots: {
              header: ({ column }) => {
                return [
                  <div class="slotBox">
                    <p class="titleBox1">{'@'}</p>
                    <p class="titleBox2">{column.title}</p>
                  </div>
                ]
              }
            },
            align: 'center'
          }
        ]
        resolve(cols)
      })
    },
    mockList (size) {
      return new Promise((resolve) => {
        const list = []
        for (let index = 0; index < 10; index++) {
          list.push({
            name: `名稱${index}`,
            sex: 'man',
            address: '123',
            phone: '111111'
          })
        }
        resolve(list)
      })
    },
    getSelectEvent () {
      const selectRecords = this.$refs.xGrid.getCheckboxRecords()
      this.$XModal.alert(selectRecords.length)
    }
  },
  mounted () {
    // this.getData()
    // this.newGetData()
  }
}
</script>
<style>
.progress {
  height: 10px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;
}
.progress > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  height: 10px;
  line-height: 16px;
  text-align: right;
  background: #cccccc;
  border: 1px solid;
  border-color: #bfbfbf #b3b3b3 #9e9e9e;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: -o-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: linear-gradient(
    to bottom,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress .orange {
  background: #fe8e01;
  border-color: #fe8e02 #fe8e02 #bf6b02;
  background-image: -webkit-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: -o-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: linear-gradient(
    to bottom,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
}
</style>

效果圖