如何让el-table-column中的<el-form-item不要向下排列

您可以使用 `el-form-item` 的 `inline` 属性来实现水平排列，让 `el-table-column` 中的 `el-form-item` 不向下排列。例如：

<el-table-column label="姓名">
  <template slot-scope="scope">
    <el-form-item :prop="'name'+scope.$index" label="姓名" inline>
      <el-input v-model="scope.row.name"></el-input>
    </el-form-item>
  </template>
</el-table-column>

在上述代码中，`inline` 属性被添加到了 `el-form-item` 上，使得表单项可以水平排列。注意，使用 `inline` 属性可能会导致表单项过于拥挤，建议根据实际情况进行调整。

相关问题

如何让el-table-column中的<el-form-item换行显示

要让 `<el-form-item>` 换行显示，你可以使用 `slot-scope` 属性在 `<el-table-column>` 中自定义列模板。在自定义列模板中，你可以使用 `<el-form>` 和 `<el-form-item>` 组件来渲染表单元素。

下面是一个简单的例子，展示了如何在 `<el-table-column>` 中使用自定义列模板来渲染一个包含 `<el-form>` 和 `<el-form-item>` 的表单元素，并让其换行显示：

<el-table-column label="姓名">
  <template slot-scope="scope">
    <el-form :model="scope.row">
      <el-form-item label="姓">
        <el-input v-model="scope.row.firstName"></el-input>
      </el-form-item>
      <el-form-item label="名">
        <el-input v-model="scope.row.lastName"></el-input>
      </el-form-item>
    </el-form>
  </template>
</el-table-column>

在上面的例子中，我们在 `<el-table-column>` 中使用了一个自定义列模板，模板的内容包含一个 `<el-form>` 组件和两个 `<el-form-item>` 组件。模板中使用了 `slot-scope` 属性来指定作用域插槽的名称为 `scope`，这样我们就可以在模板中访问当前行的数据。

注意，在使用自定义列模板时，需要将 `label` 属性设置为空字符串，否则会导致表格头部显示出错。

<el-form-item label="联系人" prop="contactsList"> <el-button type="primary" link :disabled="dialogType === 'check'" @click="handleContactsInfo">添加</el-button> <el-table :data="infoForm.contactsList" border stripe size="small"> <el-table-column label="姓名" prop="ContactsName"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactsName" maxlength="20" placeholder="请填写姓名" show-word-limit ></el-input> </template> </el-table-column> <el-table-column label="部门" prop="ContactsDepartment"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactsDepartment" maxlength="20" show-word-limit placeholder="请填写部门" ></el-input> </template> </el-table-column> <el-table-column label="职务" prop="ContactsDuty"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactsDuty" maxlength="20" show-word-limit placeholder="请填写职务" ></el-input> </template> </el-table-column> <el-table-column label="联系方式" prop="ContactNumber"> <template #default="{ row }"> <el-input :disabled="dialogType === 'check'" v-model.trim="row.ContactNumber" maxlength="50" show-word-limit placeholder="请填写联系方式" ></el-input> </template> </el-table-column> <el-table-column label="操作" width="56px"> <template #default="{ $index }"> <el-button type="primary" link size="small" :disabled="dialogType === 'check'" @click="handleRemove($index)" > 删除 </el-button> </template> </el-table-column> </el-table> </el-form-item> 该表单初始就有一个，且至少保留一个，对表单内姓名一栏进行必填校验

你可以通过在 el-input 元素的前面添加一个 el-form-item 元素，并设置 prop 属性为 "ContactsName"，然后在 el-input 元素中添加一个 :rules 属性来进行必填校验。以下是示例代码：

<el-table-column label="姓名" prop="ContactsName">
  <template #default="{ row }">
    <el-form-item prop="ContactsName" :rules="[{ required: true, message: '请填写姓名' }]">
      <el-input
        :disabled="dialogType === 'check'"
        v-model.trim="row.ContactsName"
        maxlength="20"
        placeholder="请填写姓名"
        show-word-limit
      ></el-input>
    </el-form-item>
  </template>
</el-table-column>

这样，当用户没有填写姓名时，表单会显示错误提示信息。