如果在elementui 的table组件中的单元格怎么获取元素的id呢？

可以通过在 table 的 column 中设置 scoped slot 的方式来获取单元格的元素 id。

具体步骤如下：

1. 在 column 中设置 scoped slot：

{
  title: '操作',
  scopedSlots: { 
    customRender: 'actions',
  },
},

2. 在 template 中定义 scoped slot 的内容，并给元素绑定 ref 属性：

<template slot="actions" slot-scope="text, record">
  <span ref="actionBtn" @click="handleClick(record.id)">编辑</span>
</template>

3. 在 methods 中通过 $refs 获取 ref 属性对应的元素，并获取其 id：

methods: {
  handleClick(id) {
    const elementId = this.$refs.actionBtn.id;
    console.log('元素 id：', elementId);
    console.log('点击的记录 id：', id);
  },
},

这样就可以在点击操作按钮时获取到对应单元格内元素的 id 了。

相关问题

elementui table 设置合计行修改指定单元格样式

可以使用 ElementUI 的 table 组件的 slot-scope 和 scoped slot 来自定义表格的渲染和样式，包括合计行和单元格样式。

具体实现方法如下：

1. 在 table 组件中设置 show-summary 属性为 true，开启合计行功能。

<el-table :data="tableData" show-summary>
  <!-- 表格列定义 -->
</el-table>

2. 在 table-column 组件中使用 scoped slot 来自定义表格的渲染和样式，包括合计行和单元格样式。其中，$index 表示当前行的索引，$column 表示当前列的配置对象，$row 表示当前行的数据对象。

<el-table-column prop="amount" label="金额">
  <template slot-scope="scope">
    <div :class="{ 'highlight': scope.row.amount > 100 }">
      {{ scope.row.amount }}
    </div>
  </template>
  <template slot="summary">
    <div :class="{ 'highlight': sumAmount > 100 }">
      {{ sumAmount }}
    </div>
  </template>
</el-table-column>

在上面的例子中，我们使用了 div 元素来包裹单元格内容，并根据条件动态绑定了 highlight 类名来修改单元格样式。同时，在 summary scoped slot 中也可以使用类似的方式来自定义合计行的渲染和样式。

需要注意的是，在这里我们使用了 sumAmount 变量来保存当前列的合计值，需要在 table 的 methods 属性中添加 sumAmount 方法来计算合计值。

methods: {
  sumAmount: function() {
    return this.tableData.reduce((total, item) => total + item.amount, 0);
  }
}

最后，我们可以在样式表中定义 highlight 类名来修改单元格样式。

.highlight {
  color: red;
  font-weight: bold;
}

以上就是使用 ElementUI 的 table 组件设置合计行并修改指定单元格样式的方法。

elementui table消除元素间缝隙

要消除 ElementUI Table 中元素间的间隙，可以使用以下 CSS 样式：

.el-table td, .el-table th {
  padding: 0;
}

这将消除单元格之间的内边距，从而将它们紧密地排列在一起。您可以将此样式添加到您的全局样式表中，或者将其添加到特定的组件中，如下所示：

<template>
  <el-table :data="tableData" class="table-no-gap">
    <!-- ... -->
  </el-table>
</template>

<style>
.table-no-gap td, .table-no-gap th {
  padding: 0;
}
</style>

这将仅在此特定的表格中应用样式，而不会影响全局 ElementUI Table 样式。