怎么让内容是居中左对齐呢
时间: 2024-04-03 16:34:00 浏览: 120
vue组件实现文字居中对齐的方法
如果你想要让内容居中对齐并且左对齐,可以在 `el-table-column` 上设置 `align` 属性为 `center`,并在 `div` 元素上设置 `text-align: left`,代码如下:
```
<el-table-column label="用户信息" align="center" header-align="center">
<template slot-scope="{ row }">
<div style="text-align: left;">
会员ID:{{ row.uid }}<el-link type="info" :underline="false" @click="subordinate(row.uid)">查看下级</el-link>
</div>
<p v-if="row.phone !== ''" style="text-align: center;">手机号:{{ row.phone }}</p>
<p v-if="row.email !== ''" style="text-align: center;">邮箱:{{ row.email }}</p>
<p v-if="row.area_code !== ''" style="text-align: center;">地区代码:{{ row.area_code }}</p>
<p v-if="row.invitation_code !== ''" style="text-align: center;">邀请码:{{ row.invitation_code }}</p>
<p v-if="row.register_time !== ''" style="text-align: center;">注册时间:{{ row.register_time }}</p>
</template>
</el-table-column>
```
其中,`align="center"` 设置内容居中对齐,`<div style="text-align: left;">` 设置会员ID内容左对齐,每个 `p` 元素都设置了 `style="text-align: center;"`,让其余内容居中对齐。
阅读全文