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