设置element ui table第一列内容加粗
时间: 2023-07-30 22:04:57 浏览: 500
Element-UI Table组件上添加列拖拽效果实现方法
要设置Element UI表格的第一列内容加粗,你可以使用自定义表头的方式来实现。首先,在表格的columns属性中,将第一列的header的slot属性设置为"header",然后在template中定义一个名为"header"的slot,并在其中使用<b>标签将内容包裹起来,从而实现加粗效果。以下是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="120">
<template slot="header">
<b>姓名</b>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄" width="120"></el-table-column>
<el-table-column prop="gender" label="性别" width="120"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: \[
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
\]
};
}
};
</script>
```
在上述代码中,我们将第一列的header的slot属性设置为"header",然后在template中定义了一个名为"header"的slot,并在其中使用<b>标签将内容"姓名"包裹起来,从而实现了第一列内容的加粗效果。
阅读全文