Appearance
表格组件嵌套使用表单组件
注意事项:在使用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>