1. 从“手动录入”到“一键导入”为什么Excel导入是Vue项目中的刚需做前端开发尤其是做后台管理系统有一个场景你一定不陌生产品经理或者业务方拿着一份Excel表格过来说“能不能做个功能让用户直接上传这个表格数据就自动进系统了” 这个需求几乎成了B端项目的标配。在Vue的生态里处理这种“数据导入”尤其是Excel文件的导入已经形成了一套非常成熟的方案链。为什么它如此重要想象一下一个运营人员需要批量导入1000条商品信息如果靠后台表单一条条手动添加不仅效率低下出错率也极高。而一个设计良好的导入功能能将这个耗时数小时的工作压缩到几分钟内完成并且通过程序校验数据的准确性也更有保障。这背后是前端负责文件读取、格式解析、数据预览与校验后端负责最终的数据落库与业务逻辑处理的分工协作。对于Vue开发者而言核心任务就是如何优雅、高效、稳定地在浏览器端完成Excel文件的解析并将结构化的数据交付给后端API。围绕这个需求社区已经涌现出一些优秀的库比如xlsx和专门为前端优化的xlsx-style处理样式以及阿里开源的、对Vue开发者更友好的xlsx。但仅仅知道用哪个库是不够的。在实际项目中你会遇到一系列具体问题大文件上传导致页面卡顿怎么办如何设计一个清晰的数据预览与错误提示界面复杂的表头映射和数据类型校验该如何实现后端接口又该如何配合这些才是决定一个导入功能是“能用”还是“好用”的关键。接下来我将结合多个实战项目的经验为你拆解在Vue项目中实现Excel数据导入的完整链路从核心库选型、前端解析实现到上传策略、用户体验优化以及必须要注意的“坑”。2. 核心武器库xlsx与xlsx-style的深度解析在浏览器端解析Excel文件SheetJS出品的xlsx库是当之无愧的事实标准。它是一个纯JavaScript库不依赖后端可以在Node.js和浏览器环境中运行支持读写多种电子表格格式XLSX, XLS, CSV等。2.1xlsx库的基本工作原理xlsx.read(data, opts)方法是整个解析过程的起点。它接收一个二进制数据比如File对象或ArrayBuffer并返回一个工作簿对象workbook。这个对象的结构是理解后续所有操作的基础。// 一个简化的工作簿对象结构示意 const workbook { SheetNames: [Sheet1, Sheet2], // 工作表名称数组 Sheets: { Sheet1: { // 工作表对象 !ref: A1:D5, // 数据范围如A1:D5 A1: { t: s, v: 姓名 }, // 单元格对象 B1: { t: s, v: 年龄 }, A2: { t: n, v: 25 }, // ... 其他单元格 !merges: [] // 合并单元格信息 } } };每个单元格对象cell有几个关键属性v: 单元格的原始值。t: 单元格的数据类型。s表示字符串Stringn表示数字Numberb表示布尔值Booleand表示日期Datee表示错误Error。w: 格式化后的文本如果可用。xlsx.utils.sheet_to_json是将工作表对象转换为我们熟悉的JSON数组的神器。它有两种主要模式header: 1: 返回二维数组ArrayArray第一行就是数据的一部分。适合表头不固定或需要原始矩阵的场景。header: [A, B, ...]或header: [姓名, 年龄, ...]: 返回对象数组ArrayObject将指定的数组作为键名。这是我们最常用的模式能直接生成[{姓名: 张三, 年龄: 25}, ...]这样的数据结构。2.2xlsx-style当你不只需要数据时标准的xlsx库在写文件时会丢失单元格样式字体、颜色、边框、对齐方式等。如果你的项目需求是“下载一个带复杂格式的Excel模板”或者需要在前端生成一个样式精美的报表那么xlsx-style就是必备的。它是xlsx的一个分支在原有API基础上增加了样式读写的支持。使用上它几乎完全兼容xlsx你只需要在写入时为单元格对象增加s属性来定义样式即可。import XLSX from xlsx-style; // 创建一个带样式的工作表 const ws XLSX.utils.aoa_to_sheet([[姓名, 年龄]]); ws[A1].s { // 为A1单元格添加样式 font: { bold: true, color: { rgb: FF0000 } }, fill: { fgColor: { rgb: FFFF00 } } }; // ... 后续写入文件逻辑与xlsx一致注意xlsx-style的包体积比xlsx要大因为它包含了完整的样式处理逻辑。如果你的项目只需要读取数据或者导出的Excel不需要样式那么使用标准的xlsx库是更轻量、更推荐的选择。2.3 在Vue项目中的安装与引入在Vue项目中你可以通过NPM或Yarn安装这些库。# 安装标准版推荐满足绝大多数需求 npm install xlsx # 或 yarn add xlsx # 如果需要样式支持安装xlsx-style npm install xlsx-style在Vue组件中你可以按需引入import * as XLSX from xlsx; // 引入整个库 // 或按需引入有助于Tree Shaking优化打包体积 import { read, utils } from xlsx;3. 实战构建一个健壮的Excel文件上传与解析组件了解了核心库之后我们来动手实现一个功能完整的Excel导入组件。这个组件将包含文件选择、解析、数据预览、表头映射和错误校验等核心环节。3.1 组件基础结构与文件读取首先我们创建一个ExcelImport.vue组件。最基础的部分是一个文件输入框和一个用于触发选择的按钮。template div classexcel-import input typefile reffileInput accept.xlsx, .xls, .csv changehandleFileChange styledisplay: none; / el-button typeprimary clicktriggerFileInput选择Excel文件/el-button !-- 预览区域 -- div v-iftableData.length 0 classpreview-area h3数据预览 (共 {{ tableData.length }} 条)/h3 el-table :datatableData border stylewidth: 100%; height300 el-table-column v-forcol in tableColumns :keycol.prop :propcol.prop :labelcol.label / /el-table el-button typesuccess clickhandleConfirmImport确认导入/el-button el-button clickreset重置/el-button /div /div /template script import * as XLSX from xlsx; import { ElMessage } from element-ui; // 假设使用Element UI export default { name: ExcelImport, data() { return { rawFile: null, // 原始文件对象 workbook: null, // 解析后的工作簿对象 tableData: [], // 预览表格数据 tableColumns: [], // 预览表格列配置 sheetName: , // 当前选中的工作表名 }; }, methods: { // 触发隐藏的file input triggerFileInput() { this.$refs.fileInput.click(); }, // 文件选择变化事件 async handleFileChange(event) { const file event.target.files[0]; if (!file) return; // 简单的文件类型校验 const fileTypes [.xlsx, .xls, .csv]; const fileName file.name.toLowerCase(); if (!fileTypes.some(type fileName.endsWith(type))) { ElMessage.error(请选择Excel或CSV格式的文件); this.resetFileInput(); return; } this.rawFile file; await this.parseExcelFile(file); }, // 解析Excel文件的核心方法 async parseExcelFile(file) { return new Promise((resolve, reject) { const reader new FileReader(); reader.onload (e) { try { const data new Uint8Array(e.target.result); const workbook XLSX.read(data, { type: array }); this.workbook workbook; this.sheetName workbook.SheetNames[0]; // 默认选择第一个工作表 this.previewFirstSheet(); resolve(workbook); } catch (error) { ElMessage.error(文件解析失败请检查文件格式是否正确。); console.error(Excel解析错误:, error); reject(error); } }; reader.onerror (error) { ElMessage.error(文件读取失败); reject(error); }; reader.readAsArrayBuffer(file); // 以ArrayBuffer形式读取适合xlsx库 }); }, // 预览第一个工作表的数据 previewFirstSheet() { if (!this.workbook || !this.sheetName) return; const worksheet this.workbook.Sheets[this.sheetName]; // 使用第一行作为表头转换为JSON对象数组 const jsonData XLSX.utils.sheet_to_json(worksheet, { header: 1 }); if (jsonData.length 2) { // 至少包含一行表头一行数据 ElMessage.warning(文件内容为空或格式不正确。); return; } const headers jsonData[0]; // 第一行是表头 const rows jsonData.slice(1); // 剩余行是数据 // 构建预览表格的列配置 this.tableColumns headers.map((header, index) ({ prop: col_${index}, label: header || 未命名列${index 1}, })); // 构建预览表格的数据 this.tableData rows.map(row { const rowObj {}; headers.forEach((header, idx) { // 使用动态属性名避免表头有特殊字符导致的问题 rowObj[col_${idx}] row[idx] ! undefined ? row[idx] : ; }); return rowObj; }); }, // 重置文件输入和状态 resetFileInput() { if (this.$refs.fileInput) { this.$refs.fileInput.value ; } }, reset() { this.rawFile null; this.workbook null; this.tableData []; this.tableColumns []; this.sheetName ; this.resetFileInput(); }, // 确认导入后续实现 handleConfirmImport() { console.log(待导入的数据原始:, this.tableData); // 这里将调用数据转换和提交的方法 } } }; /script这个基础版本已经实现了文件选择、解析和表格预览。用户选择文件后能立即看到Excel中的内容以表格形式呈现出来。这里有几个关键点FileReader的使用我们使用FileReader.readAsArrayBuffer来读取文件因为xlsx.read方法需要二进制数据。FileReader是异步API所以用Promise包装了一下便于在async/await中使用。表头处理我们默认将Excel的第一行作为表头。sheet_to_json的header: 1模式给了我们最原始的二维数组方便我们手动分离表头和数据行。这种方式比直接用header: A更灵活因为我们可以完全控制表头映射的逻辑。动态列属性在构建tableData时我们没有直接用表头文字作为对象的键如rowObj[header] value而是使用了col_${index}。这是因为Excel表头可能包含空格、点号、中文等直接作为对象键可能在某些场景下比如Vue的响应式系统或某些序列化库引发问题。这是一个实践中总结的小技巧。3.2 进阶表头映射与数据清洗在真实业务中Excel的列名如“用户姓名”和后台数据库的字段名如username往往不一致。我们需要一个映射关系。此外数据清洗也至关重要比如去除空格、转换日期格式、校验手机号等。我们在组件中增加一个映射配置和清洗逻辑。script // ... 省略之前的代码 export default { data() { return { // ... 其他数据 // 表头映射配置Excel表头 - 系统字段 fieldMapping: [ { excelHeader: 姓名, systemField: name, required: true, type: string }, { excelHeader: 年龄, systemField: age, required: false, type: number }, { excelHeader: 邮箱, systemField: email, required: true, type: email }, { excelHeader: 入职日期, systemField: hireDate, required: false, type: date }, ], cleanedData: [], // 清洗并映射后的数据 errorList: [], // 错误信息列表 }; }, methods: { // 在预览后进行数据清洗和映射 previewFirstSheet() { // ... 之前的解析代码得到 headers 和 rows ... // 1. 根据映射配置找到Excel表头对应的索引 const headerIndexMap {}; this.fieldMapping.forEach(map { const index headers.findIndex(h h map.excelHeader); if (index ! -1) { headerIndexMap[map.systemField] index; } else if (map.required) { // 如果必填字段在Excel中找不到记录错误 this.errorList.push(缺少必填列: ${map.excelHeader}); } }); // 2. 清洗和转换每一行数据 this.cleanedData []; this.errorList []; // 清空旧错误 rows.forEach((row, rowIndex) { const dataItem {}; let rowHasError false; this.fieldMapping.forEach(map { const sysField map.systemField; const colIndex headerIndexMap[sysField]; let cellValue colIndex ! undefined ? row[colIndex] : ; // 基础清洗去除首尾空格如果是字符串 if (typeof cellValue string) { cellValue cellValue.trim(); } // 类型转换与校验 let errorMsg ; if (map.required (cellValue || cellValue null || cellValue undefined)) { errorMsg 第${rowIndex 2}行【${map.excelHeader}】不能为空; } else if (cellValue ! ) { switch (map.type) { case number: cellValue Number(cellValue); if (isNaN(cellValue)) errorMsg 第${rowIndex 2}行【${map.excelHeader}】应为数字; break; case date: // Excel日期在JS中可能是数字自1900年1月1日以来的天数或日期字符串 // xlsx库有时会解析为Date对象有时是数字。这里做简单处理。 if (typeof cellValue number) { // Excel的日期序列号转换 (注意Excel的日期系统有个1900闰年bugxlsx库已处理) const excelEpoch new Date(Date.UTC(1899, 11, 30)); const ms (cellValue - 1) * 24 * 60 * 60 * 1000; // 减去1天因为1900-01-01是第1天 cellValue new Date(excelEpoch.getTime() ms); } else if (typeof cellValue string) { const d new Date(cellValue); if (isNaN(d.getTime())) errorMsg 第${rowIndex 2}行【${map.excelHeader}】日期格式错误; else cellValue d; } break; case email: const emailRegex /^[^\s][^\s]\.[^\s]$/; if (!emailRegex.test(cellValue)) errorMsg 第${rowIndex 2}行【${map.excelHeader}】邮箱格式错误; break; // 可以添加更多类型校验如手机号、身份证等 } } if (errorMsg) { this.errorList.push(errorMsg); rowHasError true; } dataItem[sysField] cellValue; }); if (!rowHasError) { this.cleanedData.push(dataItem); } }); // 3. 更新预览数据这里预览清洗后的数据 this.tableData this.cleanedData.map(item { // 为了预览将系统字段名转换回更易读的标签 const previewItem {}; this.fieldMapping.forEach(map { previewItem[map.excelHeader] item[map.systemField]; }); return previewItem; }); this.tableColumns this.fieldMapping.map(map ({ prop: map.excelHeader, label: map.excelHeader, })); // 4. 如果有错误提示用户 if (this.errorList.length 0) { ElMessage.warning(发现 ${this.errorList.length} 条数据错误请检查。错误详情可在控制台查看。); console.warn(数据校验错误列表:, this.errorList); } }, // 确认导入提交清洗后的数据 async handleConfirmImport() { if (this.errorList.length 0) { ElMessage.error(存在数据错误请修正后再提交。); return; } if (this.cleanedData.length 0) { ElMessage.warning(没有有效数据可导入。); return; } try { // 调用后端API const response await this.$axios.post(/api/data/import, { data: this.cleanedData, fileName: this.rawFile.name }); ElMessage.success(成功导入 ${response.data.successCount} 条数据失败 ${response.data.failCount} 条。); if (response.data.failDetails response.data.failDetails.length 0) { console.error(导入失败详情:, response.data.failDetails); // 可以在这里将失败详情展示给用户 } this.reset(); // 导入成功重置组件 } catch (error) { ElMessage.error(导入请求失败: (error.response?.data?.message || error.message)); } }, } }; /script这个进阶版本引入了几个关键概念fieldMapping映射配置这是一个核心配置定义了Excel列与系统字段的对应关系、是否必填、以及期望的数据类型。这使得组件非常灵活可以复用于不同的导入场景只需修改映射配置即可。数据清洗与校验在previewFirstSheet方法中我们增加了详细的清洗和校验逻辑。包括必填校验、类型转换字符串、数字、日期、邮箱等和格式校验。所有错误信息被收集到errorList中方便统一展示或记录。日期处理Excel中的日期是一个难点。xlsx库有时会将日期单元格解析为JavaScript的Date对象有时会解析为数字Excel的序列日期。上面的代码提供了一个基本的处理逻辑但请注意对于复杂的日期格式如包含时间可能需要更精细的解析可以使用XLSX.SSF格式化表或moment.js/day.js等库。提交清洗后数据handleConfirmImport方法不再提交原始的tableData而是提交经过清洗和映射的cleanedData。这个数据是结构化的、符合后端接口预期的JSON数组大大减轻了后端的处理压力。3.3 处理大文件与用户体验优化当用户上传一个几十兆的Excel文件时如果一次性在内存中解析并渲染所有数据很可能会导致浏览器标签页卡顿甚至崩溃。我们需要优化大文件场景下的用户体验。策略一分片读取与流式解析Web Worker对于超大文件最理想的方案是使用Web Worker在后台线程进行解析避免阻塞主线程。同时可以利用xlsx库的流式读取API如果支持或手动分片。不过xlsx库目前对真正的流式解析支持有限通常还是需要将整个文件读入内存。一个更实用的折中方案是限制预览行数。我们不需要在导入前就让用户看到全部数据只需要一个样本用于确认格式正确即可。previewFirstSheet() { // ... 解析得到 jsonData (二维数组) ... const headers jsonData[0]; const allRows jsonData.slice(1); // 只取前100行进行预览和清洗校验避免数据量过大 const previewRows allRows.slice(0, 100); const totalRows allRows.length; console.log(文件共有 ${totalRows} 行数据本次预览前 ${previewRows.length} 行。); // ... 后续的清洗映射逻辑只针对 previewRows ... // 在预览区域提示用户总行数和预览行数 this.previewInfo 共 ${totalRows} 条预览前 ${previewRows.length} 条; }策略二提供导入模板下载这是提升数据规范性和导入成功率的最佳实践。我们可以用xlsx或xlsx-style在前端动态生成一个带格式、带说明的Excel模板文件供用户下载。// 在组件中新增一个方法 downloadTemplate() { // 1. 创建工作簿和工作表 const wb XLSX.utils.book_new(); const wsData []; // 2. 构建表头行和数据示例行 const headers this.fieldMapping.map(m m.excelHeader); const examples this.fieldMapping.map(m { switch(m.type) { case string: return 示例文本; case number: return 100; case date: return 2023-10-01; case email: return exampledomain.com; default: return ; } }); const remarks this.fieldMapping.map(m m.required ? 必填 : 选填); wsData.push(headers); wsData.push(examples); wsData.push(remarks); const ws XLSX.utils.aoa_to_sheet(wsData); // 3. 可选添加样式使用xlsx-style // ws[A1].s { font: { bold: true }}; // 4. 将工作表添加到工作簿并生成文件 XLSX.utils.book_append_sheet(wb, ws, 导入模板); XLSX.writeFile(wb, 数据导入模板_${new Date().toLocaleDateString()}.xlsx); }策略三后端异步导入与进度反馈对于数万行甚至更多的数据前端解析和一次性提交可能仍然压力很大。更成熟的方案是前端将整个Excel文件通过分片上传到后端的一个临时位置。后端接收文件后返回一个任务ID。后端异步解析Excel文件执行数据清洗和入库逻辑。前端通过WebSocket或轮询根据任务ID查询导入进度和结果。这样前端只需负责上传文件和展示进度/结果将繁重的计算和IO任务交给后端体验会好很多。这需要前后端协同设计接口。4. 避坑指南那些年我踩过的Excel导入的“坑”即使有了完善的代码在实际开发中还是会遇到一些意想不到的问题。这里分享几个常见的“坑”和解决方案。4.1 数字与字符串的“自动转换”陷阱Excel中一个单元格里输入“001”默认会被识别为数字“1”。当用xlsx解析时t类型是nv值是1。这可能导致工号、身份证前导零等信息丢失。解决方案在读取文件时通过xlsx.read的选项告诉库将所有单元格按原始字符串读取。const workbook XLSX.read(data, { type: array, cellText: false, // 不生成格式化文本w cellDates: true, // 尝试将数字转换为日期 // 关键设置原始值解析 raw: true, // 默认false。为true时单元格的v值保持原始内容字符串、数字等不进行转换。 // 但注意raw: true 可能会影响日期等类型的解析需要权衡。 });更精细的控制是在sheet_to_json转换时指定raw选项const jsonData XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false, // 默认是true。false表示尝试将值转换为数字/日期等。 // 对于需要保留前导零的列更好的办法是在后续清洗逻辑中根据列索引或表头强制将其转为字符串。 });最稳妥的办法是在数据清洗阶段对于已知需要保留文本格式的列如身份证、工号无论解析出来是什么类型都使用String()强制转换为字符串并补足前导零。4.2 合并单元格的处理Excel中的合并单元格在解析后的工作表对象中只有左上角那个单元格有值其他被合并的单元格是undefined。这会导致转换后的JSON数据出现“空洞”。解决方案xlsx库提供了!merges属性它是一个数组记录了所有合并单元格的范围。我们可以利用这个信息在数据转换后“填补”那些空洞。function expandMergedCells(worksheet) { const range XLSX.utils.decode_range(worksheet[!ref]); const merges worksheet[!merges] || []; // 创建一个二维数组来表示整个工作表 const sheetMatrix []; for (let R range.s.r; R range.e.r; R) { sheetMatrix[R] []; for (let C range.s.c; C range.e.c; C) { const cellAddress XLSX.utils.encode_cell({r: R, c: C}); sheetMatrix[R][C] worksheet[cellAddress] ? worksheet[cellAddress].v : undefined; } } // 根据合并信息将值复制到被合并的单元格 merges.forEach(merge { const startCell worksheet[XLSX.utils.encode_cell(merge.s)]; if (!startCell) return; const value startCell.v; for (let R merge.s.r; R merge.e.r; R) { for (let C merge.s.c; C merge.e.c; C) { if (!(R merge.s.r C merge.s.c)) { // 跳过起始单元格本身 const addr XLSX.utils.encode_cell({r: R, c: C}); worksheet[addr] worksheet[addr] || {}; worksheet[addr].v value; // 也可以复制t类型 worksheet[addr].t startCell.t; } } } }); // 更新worksheet的引用可选因为我们已经修改了原对象 return worksheet; } // 在解析后使用 const worksheet this.workbook.Sheets[this.sheetName]; const expandedWorksheet expandMergedCells(worksheet); const jsonData XLSX.utils.sheet_to_json(expandedWorksheet, { header: 1 });4.3 性能瓶颈与内存泄漏处理超大Excel文件如超过10万行时即使在Node.js后端也可能遇到内存不足的问题。xlsx库在读取文件时会尝试将整个工作簿加载到内存中。解决方案对于前端如前所述严格限制预览数据量并考虑采用“上传后端异步处理”的模式。对于Node.js后端可以考虑使用专门的流式解析库如exceljs它支持流式读取或者将文件拆分成多个小文件分批处理。另一个思路是对于超大数据量的导入引导用户使用CSV格式并用csv-parser这类真正的流式解析器来处理。4.4 时区与日期格式混乱Excel内部用数字存储日期这个数字代表自1900年1月1日或1904年1月1日取决于工作簿以来的天数。xlsx库在cellDates: true时会尝试将其转换为JavaScript的Date对象。但JavaScript的Date对象是带本地时区的这可能导致转换出的日期与Excel中显示的日期有偏差。解决方案对于日期要求精确的场景如财务、法律不要依赖库的自动转换。可以设置raw: true获取原始的序列号数字然后使用XLSX.SSFxlsx自带的格式库或自己编写逻辑根据单元格的数字格式代码cell.z来判断它是否是日期并按照UTC时间进行精确转换。或者更简单一点在Excel模板中要求用户以“YYYY-MM-DD”这种明确的文本格式填写日期前端按字符串接收后再用day.js等库在指定时区下解析。5. 前后端协作设计一个鲁棒的导入API一个完整的导入功能离不开后端的紧密配合。前端负责“解析”和“初步校验”后端负责“最终校验”和“持久化”。双方需要约定好数据格式和错误处理机制。建议的API设计上传文件接口可选POST /api/upload/temp。用于接收整个Excel文件保存到临时目录返回一个fileId。适用于大文件或后端异步处理的场景。提交导入任务接口POST /api/data/import。请求体{ fileId: xxx, // 如果用了上传接口 // 或者直接传数据 data: [ {name: 张三, age: 25, email: zhangsanexample.com}, // ... ], taskType: user_import }响应体同步处理{ code: 0, message: success, data: { total: 150, success: 148, fail: 2, failDetails: [ {row: 3, field: email, value: invalid-email, reason: 邮箱格式不正确}, {row: 45, field: name, value: null, reason: 姓名不能为空} ] } }响应体异步处理{ code: 0, message: 任务已提交, data: { taskId: task_123456 } }查询任务进度接口GET /api/task/progress?taskIdtask_123456。用于异步处理场景返回进度百分比和状态处理中、成功、失败。后端校验要点重复性校验如用户名、邮箱是否已存在。业务逻辑校验如导入的部门ID是否有效金额是否符合规则等。数据库约束校验如字段长度、外键约束等。事务处理确保一批数据要么全部成功要么全部回滚避免脏数据。6. 扩展从Excel到更通用的数据导入掌握了Excel导入其他格式的导入就触类旁通了。CSV文件本质上就是纯文本的表格数据可以用xlsx库它支持CSV或者用更轻量的papaparse库来解析。JSON文件则可以直接用JSON.parse。我们可以将上面的组件抽象成一个通用的“数据导入处理器”它接收一个文件根据文件后缀名选择不同的解析器xlsx或papaparse最终都输出统一的JSON数组给后续的清洗和映射逻辑。这样组件的复用性就大大增强了。最后一个提醒数据导入功能是系统与外部数据交互的重要入口必须充分考虑安全性。除了前端的基本校验后端一定要做严格的权限验证、文件类型和内容的安全检查防止上传恶意文件、以及防重放攻击和限流等措施确保整个导入流程安全可控。