把box_icon_son在表格之外显示 <a-table class="table_container" :pagination="false" :columns="columnsFeWater" :dataSource="dataSourceFeWater" :scroll="{ y: 550 }" bordered > <template v-for="col in [ 'heJinName', 'heJin_C', 'heJin_Si', 'heJin_Mn', 'heJin_P', 'heJin_S', 'heJin_AI', 'heJin_Ni', 'heJin_Cr', 'heJin_Cu', 'heJin_Mo', 'heJin_V', 'heJin_Ti', 'heJin_Nb', 'heJin_B', 'heJin_N', 'heJin_Ce', 'heJin_AI2O2', 'heJin_Fe2O2', 'heJin_Sdl', ]" :slot="col" slot-scope="text, record, index" > <div :id="col"> <a-input v-if="editableDataFeWater[record.id]" placeholder="请输入" v-model="editableDataFeWater[record.id][col]" @input="Changeasd(editableDataFeWater)" /> <template v-else>{{ text }}</template> </div> </template> <a-table-column title="操作" dataIndex="operation" v-if="concealFeWater"></a-table-column> <!-- 操作 --> <template slot="operation" slot-scope="text, record, index" v-if="concealFeWater"> <span v-if="editableDataFeWater[record.id]" style="display: flex; justify-content: center; align-items: center; height: 100%" > <a-icon type="minus-square" @click="deleteItemFeWater(record.id)" /> </span> <span v-else style="display: flex; justify-content: center; align-items: center; height: 100%"> <a-icon type="minus-square" @click="deleteItemFeWater(record.id)" /> </span> <div class="box_icon"> <div class="box_icon_son" @click="addItemFeWater(record.id)"> <a-icon type="plus-square" v-if="index == dataSourceFeWater.length - 1" /> </div> </div> </template> </a-table>

您可以使用 CSS 的定位属性将 box_icon_son 移动到表格之外，例如：

.box_icon_son {
  position: absolute;
  top: -50px;
  left: 0;
}

这会将 box_icon_son 移动到表格之上，因为它的位置是相对于最近的已定位祖先元素（在这种情况下是 table_container）。您可以根据需要调整 top 和 left 的值来更改其位置。

相关问题

新增的时候也能新增record.heJin_C <a-table class="table_container" :pagination="false" :columns="columnsFeWater" :dataSource="dataSourceFeWater" :scroll="{ y: 500 }" bordered > <template v-for="col in [ 'heJinName', 'heJin_C', 'heJin_Si', 'heJin_Mn', 'heJin_P', 'heJin_S', 'heJin_AI', 'heJin_Ni', 'heJin_Cr', 'heJin_Cu', 'heJin_Mo', 'heJin_V', 'heJin_Ti', 'heJin_Nb', 'heJin_B', 'heJin_N', 'heJin_Ce', 'heJin_AI2O2', 'heJin_Fe2O2', 'heJin_Sdl', ]" :slot="col" slot-scope="text, record, index" > <div :id="col"> <a-input v-if="editableDataFeWater[record.id]" placeholder="请输入" v-model="editableDataFeWater[record.id][col]" @input="Changeasd(editableDataFeWater)" /> <template v-else>{{ text }}</template> </div> </template> <a-table-column title="操作" dataIndex="operation" v-if="concealFeWater"></a-table-column> <!-- 操作 --> <template slot="operation" slot-scope="text, record, index" v-if="concealFeWater"> <span v-if="editableDataFeWater[record.id]" style="display: flex; justify-content: center; align-items: center; height: 100%" > <a-icon type="minus-square" @click="deleteItemFeWater(record.id)" /> <a-icon type="plus-square" @click="addItemFeWater(record.id)" v-if="index == dataSourceFeWater.length - 1" /> </span> <span v-else style="display: flex; justify-content: center; align-items: center; height: 100%"> <a-icon type="minus-square" @click="deleteItemFeWater(record.id)" /> </span> <!-- <div class="box_icon"> <div class="box_icon_son" > </div> </div> --> </template> <template slot="heJin_AI" slot-scope="text, record, index"> <span> {{ record.heJin_C }} </span> <span> {{ record.heJin_Mn }} </span> <span> {{ record.heJin_Si }} </span> </template> </a-table>

抱歉，我不完全理解你的问题。但是，从你提供的代码中看来，似乎你想问的是：在该代码中，是否可以新增record.heJin_C这个字段？如果是这样，那么答案是可以的。你可以修改columnsFeWater数组，增加一个名为heJin_C的对象，定义它的title，dataIndex等属性，就可以在表格中显示这个字段了。如果我的回答没有解决你的问题，请告诉我更具体的信息，我会尽力帮助你。

<q-table class="col-md-12" style="margin-top: 15px" dense :pagination="pigitions" :rows="rows" :columns="columns" row-key="ITEM_ID" :selected-rows-label="getSelectedString" selection="multiple" :loading="loading" v-model:selected="selected"> <template v-slot:body="props"> <q-tr :props="props"> <q-td key="DOC_UNSIGNED" :props="props"> <q-btn >{{ props.row.DOC_UNSIGNED }}</q-btn> </q-td> </q-tr> </template> </q-table>

这是一个使用 Quasar 框架中的 q-table 组件进行表格数据展示和操作的代码。其中，通过设置 dense 属性使表格变得紧凑，通过设置 pagination 属性实现分页功能，通过设置 rows 和 columns 属性指定表格中的行和列，通过设置 row-key 属性指定行的唯一标识符，通过设置 selection 属性启用多选功能，通过设置 v-model:selected 属性实现双向绑定选中的行，通过使用 v-slot:body 定义表格的内容模板，通过使用 q-tr 和 q-td 组件渲染表格的行和列，其中在第二列中使用了 q-btn 组件展示按钮。