elementui宽度

ElementUI 宽度设置方法

ElementUI 组件宽度可以通过多种方式进行自定义调整，以下为常见方案：

内联样式或 class 样式

直接为组件添加 style 或 class 定义宽度：

<el-input style="width: 300px"></el-input>
<!-- 或 -->
<el-input class="custom-width"></el-input>

.custom-width {
  width: 80%;
}

组件原生属性

部分组件（如表格、输入框）支持 width 属性：

<el-table :data="tableData" style="width: 100%"></el-table>
<el-input v-model="input" width="200px"></el-input>

栅格系统布局

结合 el-row 和 el-col 实现响应式宽度：

<el-row>
  <el-col :span="12"><el-input></el-input></el-col>
  <el-col :span="6"><el-button>按钮</el-button></el-col>
</el-row>

表单 label-width

表单标签宽度通过 label-width 控制：

<el-form :label-width="'120px'">
  <el-form-item label="用户名">
    <el-input></el-input>
  </el-form-item>
</el-form>

表格列宽

表格列通过 width 或 min-width 设置固定或最小宽度：

<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" min-width="200"></el-table-column>

注意事项

• 百分比宽度需确保父容器有明确尺寸。
• 响应式场景建议结合 CSS 媒体查询或栅格系统。
• 某些组件（如对话框）宽度需通过 width 属性或全局样式覆盖。