Skip to content

表格组件嵌套使用表单组件

注意事项:在使用el-table、vxe-table组件时,如果需要嵌套使用表单组件,则应该在默认插槽标签上增加slot-scope="scope"树形,否则会引起表单组件无法正常输入的问题。

使用el-table时的示例

vue
<el-table ref="table" class="mt5" border :height="100" :data="tableData" :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE">
  <el-table-column prop="adjustItem" label="调整项目" header-align="center" align="left" min-width="200">
    <!-- 需要写插槽(slot-scope="scope"),不然input无法输入,即使插槽没有用到也要加 -->
    <template slot-scope="scope">
      <el-input size="small" v-model.trim="start" v-float style="width: 100px"></el-input>
    </template>
  </el-table-column>
</el-table>

使用vxe-table时的示例

vue
<vxe-table class="mt5" ref="vxeTable" :data="tableData" auto-resize border round show-overflow :tooltip-config="{theme: 'light'}" :scroll-y="{enabled: true}" :height="200" :header-cell-style="TABLE_HEADER_CELL_STYLE" :cell-style="TABLE_CELL_STYLE">
  <vxe-table-column field="returnState" title="上报状态" header-align="center" align="center">
    <!-- 需要写插槽(slot-scope="scope"),不然input无法输入,即使插槽没有用到也要加 -->
    <template slot-scope="scope">
      <el-input size="small" v-model.trim="start" v-float style="width: 100px"></el-input>
    </template>
  </vxe-table-column>
</vxe-table>