vxe-table学习（一）

vxe-table学习（一）
（1）vxe-table设置点击或者双击事件，参数{ row, column,}中的column能够获取点击了vxe-table-column的列配置（属性（field，title等）方法等） field对应column.property
（2）vxe-table设置:checkbox-config="{labelField: ‘name’, checkMethod: checkboxkMethod}"属性，labelField设置的值为单选框显示的字段名，可以直接显示在单选框中，checkMethod设置的方法，是否允许勾选的方法，该方法 Function({row}) 的返回值用来决定这一行的 checkbox 是否可以勾选，return为ture的话可以勾选，false则禁用
（3）xe-utils使用npm安装后，在main.js使用import引用，Vue.use（）后自动挂载到vue实例上，使用this.$utils调用
（4）改组件样式应该要找到改标签，不要看标签上的类名，要看浏览器在debug上的styles样式找到标签的类名
（5）表尾合计：

footerMethod ({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计'
          }
          if (
            [
              'purchaseAmount'
            ].includes(column.property)
          ) {
            return this.$utils.sum(data, column.property)
          }
          return null
        })
      ]
    },

（6）vxe-gird的columns属性的运用：
1、slots插槽的使用，{“header”:“headerSlots”,“default”:“defaultSlots”}，header为表头插槽，headerSlots为这个表头插槽的名字，default为内容插槽，defaultSlots为这个内容插槽的名字，要想使用插槽，只需要slot=“headerSlots”,slot="defaultSlots"就会默认为你设置的那一列的插槽
（7）在表格的表头插槽中使用data里面的数据时，在请求接口改变了data中的数据后，插槽里面的数据不会跟着更新，解决方法：可以给表格设置v-if，当数据更新之后再让表格展示
（8）合并行或列

mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
      const cellValue = row[column.property]
      if (cellValue && column.property === 'oldGoodsCode') {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      } else if (column.type) { // 合并type存在的行
        const value = row['oldGoodsCode']
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow['oldGoodsCode'] === value) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow['oldGoodsCode'] === value) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },