el-description描述列表-修改固定宽度样式

最新推荐文章于 2025-06-12 14:25:45 发布

new code Boy

最新推荐文章于 2025-06-12 14:25:45 发布

阅读量7.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46344419/article/details/132638269

文章描述了一个使用Vue.js的ElementUI库中的El-Descriptions组件来创建表格式布局，展示了如何设置列标题样式和内容样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<el-descriptions class="margin-top" :column="3" border :contentStyle="content_style" :label-style="label-style">
  <el-descriptions-item label="系统"></el-descriptions-item>
  <el-descriptions-item label="姓名"></el-descriptions-item>
  <el-descriptions-item label="部门"></el-descriptions-item>
  <el-descriptions-item label="理由" label-class-name="color_label">
     <template slot="label">理由</template>
  </el-descriptions-item>
</el-descriptions>
</template>

<script>
export default {
data(){
  return{
    content_style: {
      'text-align': 'center',
      'min-width': '200px',
      'word-break': 'break-all'
    },
    label-style: {
      'color': '#000',
      'text-align': 'center',
      'font-weight': '600',
      'height': '40px',
      'background-color': '#d6dbe1',
      'min-width': '100px',
      'word-break': 'keep-all'
    }
  }
 }
}
</script>
<style>
.color_label {
  background: #cccccc
}
</style>