| | |
| | | style="width: 100%" |
| | | > |
| | | <el-table-column v-if="showSelection" type="selection" width="55" align="center" /> |
| | | <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center" /> |
| | | <el-table-column v-if="showIndex" label="序号" width="60" align="center" fixed="left"> |
| | | <template #default="scope"> |
| | | {{ getRowIndex(scope.$index) }} |
| | | </template> |
| | | </el-table-column> |
| | | <template v-for="col in columns" :key="col.prop"> |
| | | <el-table-column v-bind="col" :show-overflow-tooltip="shouldShowTooltip(col, tableData)" |
| | | <el-table-column v-bind="col" |
| | | :formatter="col.formatter || defaultFormatter" align="center"> |
| | | <template v-if="col.slot" #default="scope"> |
| | | <slot :name="col.prop" :row="scope.row" :column="scope.column" :index="scope.$index"></slot> |
| | |
| | | rowKey: { |
| | | type: String, |
| | | default: 'id' |
| | | }, |
| | | showOverflowTooltip: { |
| | | }, showOverflowTooltip: { |
| | | type: Boolean, |
| | | default: true |
| | | }, |
| | | // 当前页码 |
| | | currentPage: { |
| | | type: Number, |
| | | default: 1 |
| | | }, |
| | | // 每页大小 |
| | | pageSize: { |
| | | type: Number, |
| | | default: 10 |
| | | } |
| | | }) |
| | | const tableRef = ref(null) |
| | | // 检查列是否需要显示tooltip |
| | | const shouldShowTooltip = (col, data) => { |
| | | // 如果列配置中明确设置了showOverflowTooltip,使用该设置 |
| | | if (col.hasOwnProperty('showOverflowTooltip')) { |
| | | return col.showOverflowTooltip; |
| | | } |
| | | // 如果没有prop,直接返回false |
| | | if (!col.prop) return false; |
| | | // 检查该列在所有数据中是否有非空值,默认显示tooltip |
| | | return data.some(row => row[col.prop] != null && row[col.prop] !== ''); |
| | | }; |
| | | |
| | | // 默认的格式化函数 |
| | | const defaultFormatter = (row, column, cellValue) => { |
| | |
| | | const handleExport = (row) => { |
| | | emit('export', row) |
| | | } |
| | | |
| | | // 计算分页序号 |
| | | const getRowIndex = (index) => { |
| | | return (props.currentPage - 1) * props.pageSize + index + 1; |
| | | }; |
| | | |
| | | // 正确的 toggleRowSelection 方法:针对单行 |
| | | const toggleRowSelection = (row, selected) => { |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | :deep(.el-tooltip) { |
| | | justify-content: center !important; |
| | | } |
| | | .el-table { |
| | | margin: 20px 0 !important; |
| | | } |