vxe-table的常见用法

1.安装

npm install xe-utils vxe-table@2  或者  npm install xe-utils vxe-table@3  对应vue版本
网址：https://vxetable.cn/v3/#/table/api

2.高级用法

表头，表身，数据有后端生成     tableColumn表头    tableData对应的内容

<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>

如果v-for后端渲染，不建议这样用

<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: '测试',
          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 }) {
      // 模拟后台
      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: '测试', 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>

3.常用的api

show-overflow  ：设置所有内容过长时显示为省略号
auto-resize：  自动监听父元素的变化去重新计算表格
border：是否带有边框
align： 所有的列对齐方式
resizable：列宽拖动
@resizable-change：	当列宽拖动发生变化时会触发该事件
:menu-config="tableMenu"  右击菜单配置
@menu-click=   右击菜单事件

4.行列拖拽插件

npm install sortablejs --save

<template>
  <el-table border :data="tableData" row-key="uid">
    <el-table-column
      v-for="(item, index) in columns"
      :key="`col_${index}`"
      :prop="item.prop"
      :label="item.label"
    >
    </el-table-column>
  </el-table>
</template>
<script>
import Sortable from "sortablejs";              //引入sortablejs插件
export default {
  data() {
    return {
      columns: [
        { label: "日期", prop: "date" },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
      ],
      tableData: [
        {
          uid: "a7f1730112f7c62a55e51121234f7051",
          date: "2016-05-02",
          name: "王1",
          address: "100 弄",
        },
        {
          uid: "b1v3430112f7c62a55e51121234h6789",
          date: "2016-05-04",
          name: "王2",
          address: "200 弄",
        },
        {
          uid: "c45y630112f7c62a55e51121234mi90",
          date: "2016-05-01",
          name: "王3",
          address: "300 弄",
        },
        {
          uid: "dwe2330112f7c62a55e51121234kk890",
          date: "2016-05-03",
          name: "王4",
          address: "400 弄",
        },
      ],
    };
  },
  mounted() {
    this.rowDrop();                     // 行拖拽
    this.columnDrop();                  // 列拖拽
  },
  methods: {
    rowDrop() {                                     
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        draggable: ".el-table__row",
        onEnd({ newIndex, oldIndex }) {             //回调
          console.log(`原本位置：${_this.tableData[oldIndex].uid}`);
          console.log(`目标位置：${_this.tableData[newIndex].uid}`);
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
    columnDrop() {                                 
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {                           //回调
          const oldItem = this.columns[evt.oldIndex];
          this.columns.splice(evt.oldIndex, 1);
          this.columns.splice(evt.newIndex, 0, oldItem);
        },
      });
    },
  },
};
</script>