el-descriptions中如何设置每行列数不同
时间: 2024-04-07 11:32:29 浏览: 142
在`<el-descriptions>`中设置每行列数不同,可以通过在`<el-descriptions>`组件中使用`<el-row>`和`<el-col>`来实现。
例如,设置第一行两列,第二行三列,第三行一列:
```html
<el-descriptions>
<el-row>
<el-col :span="12">
<el-descriptions-item label="姓名">张三</el-descriptions-item>
</el-col>
<el-col :span="12">
<el-descriptions-item label="年龄">18</el-descriptions-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-descriptions-item label="地址">北京市海淀区</el-descriptions-item>
</el-col>
<el-col :span="8">
<el-descriptions-item label="电话">010-12345678</el-descriptions-item>
</el-col>
<el-col :span="8">
<el-descriptions-item label="邮箱">example@example.com</el-descriptions-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-descriptions-item label="职业">学生</el-descriptions-item>
</el-col>
</el-row>
</el-descriptions>
```
使用`<el-row>`和`<el-col>`可以自由设置每行中的列数和每列的宽度,实现不同行列数的效果。
阅读全文