element-plus表格动态计算宽度以及分页

其他内容区域

const loading = ref(false)
let tableData = reactive([])
let total = ref(0)
let pageModuleWidth = ref(0)
//表格分页用到的参数
let pagination = reactive({
currPage: 1, //当前页码
pageSize: 10, //每页显示的条数
pageNo: 1
})

const columns = reactive([
{ prop: ‘accountName’, label: ‘时间’, min: ‘212px’, align: ‘left’ },
{ prop: ‘yearMonth’, label: ‘已激活卡数’, min: ‘125px’, align: ‘left’ },
{ prop: ‘totalCardNum’, label: ‘可激活卡数’, min: ‘113px’, align: ‘left’ },
{ prop: ‘totalFlowUsage’, label: ‘可测试卡数’, min: ‘116px’, align: ‘left’ },
{ prop: ‘totalSmsNum’, label: ‘已停用卡数’, min: ‘114px’, align: ‘left’ },
{ prop: ‘totalSmsNum’, label: ‘库存卡数’, min: ‘121px’, align: ‘left’ },
{ prop: ‘totalFee’, label: ‘已失效卡数’, min: ‘119px’, align: ‘left’ },
{ prop: ‘totalOverFlowFee’, label: ‘总计SIM卡数’, min: ‘134px’, align: ‘right’ }
])

// 表格表头样式
function headClass(row) {
// 表头居中
if (row.columnIndex !== 0) {
return { ‘text-align’: ‘center’ }
// 第一列表头要左对齐
} else if (row.columnIndex === 0) {
return { ‘text-align’: ‘left’ }
}
}

// 初始化
onMounted(async () => {
await getData()
getWidth()
window.addEventListener(‘resize’, getWidth)
})

// 销毁组件
onUnmounted(() => {
window.removeEventListener(‘resize’, getWidth)
})

// 获取pageModdule宽度
function getWidth() {
if (widthRef.value) {
nextTick(() => {
//div容器获取tableBox.value.clientWidth
pageModuleWidth.value = widthRef.value.$el.clientWidth
})
}
}

// 表格内容区域增加padding样式 'tableContentPadding’此名称在style样式中有定义
function cellClassName(row) {
let columnStyle = [‘yearMonth’, ‘totalCardNum’, ‘totalFlowUsage’, ‘totalSmsNum’, ‘totalVoiceDuration’, ‘totalFee’, ‘totalOverFlowFee’]
if (columnStyle.includes(row.column.rawColumnKey)) {
return ‘tableContentPadding’
}
}

// 页码改变
function handleCurrentChange(val) {
pagination.currPage = val
pagination.pageNo = val
getData()
}

// 展示条数改变
function handleSizeChange(val) {
pagination.pageSize = val
getData()
}

/**

• 格式化数字为金额格式，保留两位小数 四舍五入
• @param { number } min 最少保留小数的位数，默认2
  */
  function formatMoney(number, min = 2) {
  const formatter = new Intl.NumberFormat(‘en-US’, {
  style: ‘decimal’,
  minimumFractionDigits: min,
  maximumFractionDigits: 2
  })
  return formatter.format(number)
  }

// 千分位加逗号
function formatThousand(_, column, cellValue) {
try {
// 需要过滤千分位的字段
const needFormatterList = [‘totalCardNum’, ‘totalFlowUsage’, ‘totalSmsNum’, ‘totalFee’, ‘totalFlowFee’, ‘totalOverFlowFee’, ‘totalSmsFee’, ‘totalVoiceFee’]
if (needFormatterList.includes(column.rawColumnKey)) {
return formatMoney(cellValue, 0)
} else if (column.rawColumnKey === ‘totalVoiceDuration’) {
// 通话时长过滤为 分:秒 格式
return dayjs().startOf(‘day’).second(cellValue).format(‘mm:ss’)
} else {
return cellValue
}
} catch (error) {
return cellValue
}
}