如何在列配置取自数据库的el-table中添加el-input与el-select组件

• 第一步：扩展表头配置项，给从数据库读取的partstitle数组的每一项新增控制字段，参考结构如下：

// 后端返回的表头配置示例
partstitle: [
  {
    id: 1,
    title: '零件名称',
    prop: 'partName', // 对应tableData中的字段名，必填
    type: 'input' // 标记该列渲染输入框
  },
  {
    id: 2,
    title: '零件分类',
    prop: 'partType',
    type: 'select', // 标记该列渲染下拉框
    options: [ // 下拉选项可由后端同表头一起返回
      { label: '电子元件', value: 1 },
      { label: '结构件', value: 2 },
      { label: '紧固件', value: 3 }
    ]
  }
]

• 第二步：修改表格代码，通过作用域插槽动态判断渲染对应编辑组件：

<el-table :data="tableData" style="width: 100%">
  <el-table-column 
    v-for="col in partstitle" 
    :key="col.id" 
    :label="col.title"
    :prop="col.prop"
  >
    <template #default="scope">
      <!-- 渲染输入框 -->
      <el-input 
        v-if="col.type === 'input'" 
        v-model="scope.row[col.prop]"
        placeholder="请输入内容"
      />
      <!-- 渲染下拉框 -->
      <el-select 
        v-else-if="col.type === 'select'" 
        v-model="scope.row[col.prop]"
        placeholder="请选择分类"
      >
        <el-option
          v-for="opt in col.options"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        />
      </el-select>
      <!-- 无需编辑的列直接渲染文本 -->
      <span v-else>{{ scope.row[col.prop] }}</span>
    </template>
  </el-table-column>
</el-table>

• 注意事项：
  • tableData的每条数据必须包含和partstitle中prop字段对应的键，否则双向绑定会失效
  • v-model会自动将修改同步到tableData原数组，提交数据时直接上传tableData即可
  • 如需扩展日期选择器、开关等其他组件，按照相同判断逻辑新增分支即可
  • 若需要点击单元格才进入编辑状态，可新增编辑状态标识变量，控制显示文本还是编辑组件即可

内容的提问来源于stack exchange，提问作者Saxon