vxe-table学习(一)
(1)vxe-table设置点击或者双击事件,参数{ row, column,}中的column能够获取点击了vxe-table-column的列配置(属性(field,title等)方法等)(2)vxe-table设置:checkbox-config="{labelField: 'name', checkMethod: checkboxkMethod}"属性,labelField设置的值为单选框
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 }
}
}
}
},
更多推荐
所有评论(0)