vxe-table learning (1)
(1) vxe-table sets click or double-click events. The column in the parameters {row, column,} can obtain the column configuration (attribute (field, title, etc.) method of vxe-table-column clicked) etc.) field corresponds to column.property
(2) vxe-table setting: checkbox-config="{labelField: 'name', checkMethod: checkboxkMethod}" attribute, the value set by labelField is the field name displayed by the radio button, which can be displayed directly In the radio button box, the method set by checkMethod determines whether the check method is allowed. The return value of this method Function({row}) is used to determine whether the checkbox in this row can be checked. If the return value is true, it can be checked. If it is false, it can be checked. Then disable
(3) After xe-utils is installed using npm, use import reference in main.js, Vue.use() and automatically mount to the vue instance, use this.$utils to call
(4) Change the component style and you should find it When changing tags, don’t look at the class name on the tag. Look at the browser’s styles on debug to find the class name of the tag
(5) Total at the end of the table:
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) Use of the columns attribute of vxe-gird:
1. Use of slots, {"header": "headerSlots", "default": "defaultSlots"}, header is the header slot, headerSlots is the header The name of the slot, default is the content slot, and defaultSlots is the name of the content slot. If you want to use the slot, you only need slot="headerSlots", slot="defaultSlots" will default to the slot in the column you set. Slot
(7) When using the data in data in the header slot of the table, after the request interface changes the data in data, the data in the slot will not be updated accordingly. Solution: You can set v-if for the table , let the table display after the data is updated
(8) Merge rows or columns
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 }
}
}
}
},