把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>
时间: 2024-04-22 20:23:44 浏览: 100
可以尝试使用CSS样式来实现在表格之外显示,可以为box_icon_son添加样式position: fixed;。具体代码如下:
.box_icon_son {
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
background-color: #1890ff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
需要注意的是,这个样式可能会影响到页面其他元素的布局,需要根据实际情况进行调整。
阅读全文