用elementUI時，遇到了一個無法對齊的問題：代碼如下：

<el-table :data="form.dataList"?
? ? <el-table-column label="驗收結論" prop="checkResult" width="200">
? ? <template slot-scope="scope">
? ? ? <el-form-item label=' ' label-width="20px"
? ? ? ? :prop="'dataList.' + scope.$index + '.checkResult'" :rules="rules.checkResult">
? ? ? ? <el-selectv-model="scope.row.checkResult">
? ? ? ? ? <el-option v-for="dict in dict_check_result" :key="dict.value" :label="dict.label" :value="dict.value" />
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? </template>
? </el-table-column>

? <el-table-column label="備注" prop="emarks" width="200">
? ? <template slot-scope="scope">
? ? ? ? <el-input v-model="scope.row.remarks" placeholder="請輸入備注" />
? ? </template>
? </el-table-column>
</el-table>

顯示如下：輸入框無論如何也無法對齊，寫css或者style也不響應。

解決方法：

? ? 仔細觀察：原來是“驗收結論”有驗證規，不符合時需要顯示提示信息，所以多出了一些空間。在標簽中多出<el-form-item>, 考慮在備注中也加入這個標簽。改正后如下：用紅字標出加入部分。

<el-table :data="form.dataList"?
? ? <el-table-column label="驗收結論" prop="checkResult" width="200">
? ? <template slot-scope="scope">
? ? ? <el-form-item label=' ' label-width="20px"
? ? ? ? :prop="'dataList.' + scope.$index + '.checkResult'" :rules="rules.checkResult">
? ? ? ? <el-selectv-model="scope.row.checkResult">
? ? ? ? ? <el-option v-for="dict in dict_check_result" :key="dict.value" :label="dict.label" :value="dict.value" />
? ? ? ? </el-select>
? ? ? </el-form-item>
? ? </template>
? </el-table-column>

? <el-table-column label="備注" prop="contractRemarks" width="200">
? ? ? ?<template slot-scope="scope">
? ? ? ? ? ? <el-form-item label=' ' label-width="20px" :prop="'List.' + scope.$index + '.remarks'" >
? ? ? ? ? ? ? ?<el-input v-model="scope.row.remarks" placeholder="請輸入備注" />
? ? ? ? ? ? </el-form-item>
? ? ? ? </template>
? ? ?</el-table-column>
</el-table>

刷新頁面，試看結果OK。

解決的方法怪怪的，但確是一種解決方法。