| | |
| | | type="index" |
| | | width="60" |
| | | align="center" |
| | | /> |
| | | <template v-for="col in columns" :key="col.prop"> |
| | | /> <template v-for="col in columns" :key="col.prop"> |
| | | <el-table-column |
| | | v-bind="col" |
| | | :show-overflow-tooltip="false" |
| | | align="center" |
| | | > |
| | | <template #default="scope"> |
| | | <template v-if="col.slot"> |
| | | <slot></slot> |
| | | </template> |
| | | <template v-else> |
| | | <slot |
| | | :name="col.prop" |
| | | :row="scope.row" |
| | | :column="scope.column" |
| | | :index="scope.$index" |
| | | ></slot> |
| | | </template> <template v-else> |
| | | <div |
| | | class="cell-edit" |
| | | @dblclick="handleCellEdit(scope.row, col.prop)" |
| | | :class="{ editable: isColumnEditable(col.prop) }" |
| | | > |
| | | <!-- 显示状态:使用格式化的值 --> |
| | | <span |
| | | v-if="!scope.row.editing || !scope.row.editing[col.prop]" |
| | | class="cell-text" |
| | | > |
| | | {{ |
| | | scope.row[col.prop] == null || scope.row[col.prop] === "" |
| | | ? "--" |
| | | : scope.row[col.prop] |
| | | formatCellValue(scope.row, scope.column, scope.row[col.prop], col) |
| | | }} |
| | | </span> |
| | | <!-- 编辑状态:使用原始值,不经过格式化 --> |
| | | <el-input |
| | | v-else |
| | | v-model="scope.row[col.prop]" |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </template> |
| | | <!-- 操作列 --> |
| | | <el-table-column |
| | | v-if="showOperations" |
| | | :label="operationsLabel" |
| | | :width="operationsWidth" |
| | | fixed="right" |
| | | align="center" |
| | | > |
| | | <template #default="scope"> |
| | | <slot name="operations" :row="scope.row"> |
| | | <el-button |
| | | v-if="operations.includes('edit')" |
| | | link |
| | | type="primary" |
| | | size="small" |
| | | @click="handleEdit(scope.row)" |
| | | >编辑</el-button |
| | | > |
| | | <!-- <el-button--> |
| | | <!-- v-if="operations.includes('delete')"--> |
| | | <!-- link--> |
| | | <!-- type="danger"--> |
| | | <!-- size="small"--> |
| | | <!-- @click="handleDelete(scope.row)"--> |
| | | <!-- >删除</el-button>--> |
| | | </slot> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </template> |
| | | |
| | |
| | | // 检查该列在所有数据中是否有非空值 |
| | | return data.some((row) => row[col.prop] != null && row[col.prop] !== ""); |
| | | }; |
| | | // 默认的格式化函数 |
| | | const defaultFormatter = (row, column, cellValue) => { |
| | | return cellValue == null || cellValue === "" || cellValue === 0 |
| | | ? "0" |
| | | : cellValue; |
| | | }; |
| | | |
| | | // 格式化单元格值 |
| | | const formatCellValue = (row, column, cellValue, col) => { |
| | | // 如果列有自定义格式化器,使用自定义格式化器 |
| | | if (col.formatter && typeof col.formatter === 'function') { |
| | | return col.formatter(row, column, cellValue); |
| | | } |
| | | // 否则使用默认格式化器 |
| | | return defaultFormatter(row, column, cellValue); |
| | | }; |
| | | // 处理单元格编辑 |
| | | const handleCellEdit = (row, prop) => { |
| | | // 如果不允许编辑单元格,直接返回 |