快捷導(dǎo)航

vxe-table中vxe-grid的使用解讀

更新時(shí)間：2023年10月16日 15:18:26 作者：鳴拙

這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vxe-grid的使用

渲染表格的話，不可能所有的數(shù)據(jù)都是靠自己手動(dòng)生成的，需要通過v-for渲染出來，

v-for循環(huán)生成列

<template>
  <div>
    <vxe-table
          border="inner"
          highlight-hover-row
          highlight-current-row
          ref="xTable"
          height="300"
          :data="tableData">
          <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
        </vxe-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      allAlign: null,
      tableColumn: [
        { type: 'seq', width: 60, fixed: null },
        { type: 'checkbox', width: 50, fixed: null },
        { field: 'name', title: 'Name', width: 200 },
        { field: 'nickname', title: 'Nickname', width: 300 },
        { field: 'sex', title: 'Sex', width: 200 },
        { field: 'role', title: 'Role', width: 200 },
        { field: 'address', title: 'Address', width: 300, showOverflow: true }
      ],
      tableData: [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 從入門到放棄' },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women ', age: 23, address: 'vxe-table 從入門到放棄' },
        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women ', age: 21, address: 'vxe-table 從入門到放棄' },
        { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man ', age: 29, address: 'vxe-table 從入門到放棄' },
        { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man ', age: 35, address: 'vxe-table 從入門到放棄' }
      ]
    }
  }
}
</script>

如果是從后端獲取數(shù)據(jù)的話，推薦使用vxe-grid來渲染表格

vxe-grid生成表格

<template>
  <div>
    <vxe-grid
      border
      resizable
      show-footer
      ref="xGrid"
      :footer-method="footerMethod"
      height="400"
      :tree-config="{lazy: true, children: 'children', hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      :columns="columns"
      :data="data"
    ></vxe-grid>
  </div>
</template>


<script>
export default {
  data () {
    return {
      columns: [
        { type: 'seq', width: 60, fixed: 'left' },
        // { type: 'checkbox', title: 'ID', width: 140, fixed: 'left', treeNode: true },
        // eslint-disable-next-line no-undef
        { field: 'name', title: 'Name', editRender: { name: 'NameCon', event }, treeNode: true },
        { field: 'nickname', title: 'Nickname' },
        {
          field: 'role',
          title: 'Role',
          type: 'text',
          cellRender: { name: 'input' }
        },
        {
          field: 'sex',
          title: 'Sex',
          cellRender: { name: 'DICT', props: { code: 'SEX_LIST' } }
        },
        { field: 'describe', title: 'Describe', showOverflow: true }
      ],
      data: []
    }
  },
  created () {
    this.findList()
  },
  methods: {
    changeData () {
      const xTable = this.$refs.xGrid.tableData
      console.log(xTable)
      for (let i = 0; i < xTable.length; i++) {
        // xTable[i].name = '{"name":"aaaaa"}'
        xTable[i].name = 'name1'
        if (xTable[i].children && xTable[i].children.length) {
          for (let j = 0; j < xTable[i].children.length; j++) {
            // xTable[i].children[j].name = '{"name":"bbbb"}'
            xTable[i].children[j].name = 'bbb'
            // xTable[i].children[j] = []
          }
          // xTable[i].children = []
        }
      }
      // this.$refs.xGrid.clearTreeExpand()
      // this.$refs.xGrid.setTreeExpand(xTable[0], true)
      console.log(xTable)
    },
    footerMethod () {
      console.log(1212)
      return this.footerData
    },
    findList () {
      // const _this = this
      this.data = [
        {
          //         // name: 'name1',
          name: '{"name":"children"}',
          nickname: 'T1',
          role: '前端',
          sex: '1',
          age: 22,
          status: '1',
          describe: 'Address abc123',
          hasChild: true
        },
        {
          name: '{"name":"children"}',
          // name: 'name-children',
          nickname: 'Test1-1',
          role: '去掉',
          sex: '22',
          age: '0',
          status: '2',
          describe: 'Address rttry',
          hasChild: false
        },
        {
          name: '{"name":"children"}',
          // name: 'name-children',
          nickname: 'Test1-2',
          role: '測(cè)試',
          sex: '1',
          age: '26',
          status: '3',
          describe: 'Address xxxxx',
          hasChild: true
        }
      ]
      const allColumn = this.columns
      console.log(this.data)
      this.footerData = [
        allColumn.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '平均'
          }
          return columnIndex
        }),
        allColumn.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          return columnIndex
        })
      ]
    },
    loadChildrenMethod ({ row }) {
      // 模擬后臺(tái)
      return new Promise(resolve => {
        setTimeout(() => {
          const childs = [
            { name: 'name-children', nickname: 'Test1-1', role: '去掉', sex: '22', age: '0', status: '2', describe: 'Address rttry' },
            { name: 'name-children', nickname: 'Test1-2', role: '測(cè)試', sex: '1', age: 26, status: '3', describe: 'Address xxxxx' }
          ]
          const rowChildren = {
            name: row.name, nickname: row.nickname, role: row.role, sex: row.sex, age: row.age
          }
          childs.push(rowChildren)
          resolve(childs)
        }, 300)
      })
    },
    linkEvent ({ row }) {
      console.log(row.name)
    }
  }
}
</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>

在這里插入圖片描述