把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添加样式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;
}

需要注意的是，这个样式可能会影响到页面其他元素的布局，需要根据实际情况进行调整。

相关问题

<a-table :columns="columns1" :data-source="data" :pagination="false" :scroll="{ y: 180 }" />设置单元格高度

要设置单元格的高度，您可以使用slot-scope插槽和自定义CSS样式来实现。

1. 首先，在columns1中定义您的列，例如：

data() {
  return {
    columns1: [
      {
        title: 'Column 1',
        dataIndex: 'column1',
        width: 100,
        customRender: (text, record, index) => {
          return `<div class="custom-cell">${text}</div>`;
        },
      },
      // 其他列...
    ],
    // ...
  };
},

2. 然后，在样式表中为自定义单元格添加高度，例如：

.custom-cell {
  height: 60px; /* 设置您想要的高度 */
  line-height: 60px; /* 可选，用于垂直居中文本 */
}

通过自定义渲染函数和CSS样式，您可以将单元格的高度设置为所需的值。请根据您的实际情况调整代码。

<q-table class="col-md-12" style="margin-top: 15px" dense :pagination="pigitions" :rows="rows" :columns="columns" row-key="FORM_ID" :selected-rows-label="getSelectedString" selection="multiple" :loading="loading" v-model:selected="selected"> </q-table>

在您提供的代码中，q-table 的行高亮没有被设置。您可以使用 `:row-class` 属性来设置行高亮类名。例如，以下代码将 `highlighted-row` 类名应用到具有 `highlight` 属性的行：

<q-table
  class="col-md-12"
  style="margin-top: 15px"
  dense
  :pagination="pigitions"
  :rows="rows"
  :columns="columns"
  row-key="FORM_ID"
  :selected-rows-label="getSelectedString"
  selection="multiple"
  :loading="loading"
  v-model:selected="selected"
  :row-class="(rowData) => rowData.highlight ? 'highlighted-row' : ''">
</q-table>

请注意，`:row-class` 属性中的箭头函数接受 `rowData` 参数，该参数包含当前行的数据。在上面的示例中，我们检查 `highlight` 属性是否为真，如果是，则返回 `highlighted-row` 类名，否则返回空字符串。您可以根据需要调整这个函数。