el-collapse 面版标题居中 请显示完整代码示例
时间: 2023-08-04 20:03:52 浏览: 39
可以使用 `el-collapse` 的 `title` 插槽来自定义标题的样式,然后在标题上添加 `text-align: center` 样式即可实现标题居中。以下是一个完整的示例代码:
```html
<template>
<div>
<el-collapse v-model="activeNames">
<el-collapse-item title="标题1" name="1">
内容1
</el-collapse-item>
<el-collapse-item :title="titleTemplate" name="2">
内容2
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1']
}
},
methods: {
titleTemplate() {
return (
<div style="text-align: center;">
标题2
</div>
)
}
}
}
</script>
```
在上面的代码中,我们使用了 `titleTemplate` 方法来自定义标题的样式,然后在方法中返回一个 `<div>` 元素,并在元素上添加了 `text-align: center` 样式。最后,将该方法绑定到 `el-collapse-item` 的 `title` 属性上即可。