Element-UI中关于table表格的那些骚操作(小结)

让我们来看看如何在项目中实际应用这些功能。你需要在本地克隆这个项目demo。通过以下步骤即可轻松上手：

1. 克隆项目到本地：使用git命令克隆Element-table项目到你的本地环境。感谢Hanxueqing的贡献，为我们提供了这个优秀的项目示例。

2. 安装依赖：进入项目目录后，运行npm install命令安装项目所需的所有依赖。

3. 开启本地服务器：使用npm run dev命令开启本地开发服务器，你就可以在localhost上查看项目效果了。

现在让我们看看如何在代码层面实现这些功能：

```html

```

在JavaScript部分：

```javascript

methods: {

showIndex(index) {

// 使用下标执行相关操作

console.log('当前行下标:', index);

},

showName(name) {

// 获取当前行的name属性值并处理

console.log('当前姓名:', name);

}

}

```

对于样式部分：

```css

.specialColor {

color: red; / 将字体颜色设置为红色 /

}

```

一、表头单元格的类名（header-cell-class-name）

我们可以通过定义一个方法，返回我们想要的类名，然后将这个方法传递给header-cell-class-name属性。例如，我们想要所有的表头单元格都有相同的样式，可以编写一个headerStyle方法，返回'tableStyle'，然后在style中编写相应的tableStyle样式。

HTML代码：

```html

:data="tableData[lang]"

class="table"

stripe

border

:header-cell-class-name="headerStyle">

```

JS代码：

```javascript

headerStyle ({row, column, rowIndex, columnIndex}) {

return 'tableStyle';

}

```

SCSS代码：

```scss

.tableStyle {

background-color: 1989fa !important;

color: fff;

font-weight: ;

}

```

二、表头单元格的样式（header-cell-style）

我们可以定义一个方法来返回样式，或者使用一个固定的对象来为所有表头单元格设置一样的样式。如果使用函数形式，可以编写一个tableHeaderStyle方法，返回样式字符串。如果使用对象形式，可以直接在对象中编写样式。

函数形式：

HTML代码：

```html

:data="tableData[lang]"

class="table"

stripe

border

:header-cell-style='tableHeaderStyle'>

```

JS代码：

```javascript

tableHeaderStyle ({row, column, rowIndex, columnIndex}) {

return 'background-color:1989fa;color:fff;font-weight:;';

}

```

对象形式：

HTML代码：

```html

:data="tableData[lang]"

class="table"

stripe

border

:header-cell-style="{ 'background-color': '1989fa', 'color': 'fff', 'font-weight': '' }">

```

三、表头行的类名（header-row-class-name）

我们可以使用字符串为所有表头行设置一个固定的类名，或者使用一个方法来返回类名。注意，header-row-class-name是添加在tr上面的，而header-cell-class-name是添加在th上面的。如果想要让添加在tr上的样式显示，可能需要关闭element-ui中原本的th的样式，以防被覆盖。

表头行与行样式的定制

header-cell-style 与 header-cell-class-name

当我们谈论表头行的样式，首先会想到每一个表头单元格的样式和类名。`header-cell-style` 回调方法允许我们为每个表头单元格设置独特的样式。它是一个函数，接受一个包含单元格数据和索引等信息的对象作为参数，并返回定义样式的对象。我们也可以使用 `header-cell-class-name` 来为所有表头单元格设置一个固定的类名，以应用统一的样式。

设置行背景色

使用方式

具体实现代码如下：

在 `` 标签中设置 `:row-style="tableRowStyle"` 并传入数据 `tableData`：

```html

:data="tableData"

class="table"

border

:row-style="tableRowStyle">

```

在 `tableRowStyle` 方法中根据条件返回不同的样式：

```javascript

// 根据每行的 buttonVisible 值修改 tr 行的背景色

tableRowStyle ({ row, rowIndex }) {

if (this.tableData[rowIndex].buttonVisible === false) {

return 'background-color: rgba(243,243,243,1)'; // 置为灰色背景

} else {

return 'background-color:ecf5ff'; // 其他情况下的背景色设置（如默认色）

}

}

```

添加操作列并在其中使用 `slot-scope` 添加按钮：

```html