el-form设置el-form-item一行三个 动态

要实现el-form中el-form-item一行三个的布局，可以使用el-row和el-col组件进行布局。具体实现方式如下：

1. 在el-form中添加el-row组件，并设置gutter属性来设置子元素之间的间隔。

2. 在el-row中添加三个el-col组件，并设置span属性为8，即每个el-col占据12个格子中的8个。

3. 在每个el-col中添加el-form-item组件。

4. 如果要动态控制每行显示的数量，可以在代码中动态计算el-row中el-col的数量并渲染。

以下是示例代码：

<template>
  <el-form ref="form" :model="formData" label-width="80px">
    <el-row :gutter="20">
      <el-col v-for="(item, index) in formItems" :key="index" :span="8">
        <el-form-item :label="item.label">
          <el-input v-model="formData[item.prop]" :placeholder="item.placeholder"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        address: ''
      },
      formItems: [
        { label: '姓名', prop: 'name', placeholder: '请输入姓名' },
        { label: '年龄', prop: 'age', placeholder: '请输入年龄' },
        { label: '地址', prop: 'address', placeholder: '请输入地址' }
      ]
    };
  }
};
</script>

<!