el-table 通过class给每列设置宽度

在Element UI的`el-table`组件中，如果你想通过CSS类来动态设置表格列的宽度，你可以直接在HTML模板中为每一列添加一个自定义的类，并在CSS文件中为这个类定义宽度。这是一个基本的例子：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(item, index) in columns"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      class="custom-width-col"  <!-- 这里添加自定义类名 -->
      :width="item.width || 'auto'"  <!-- 如果有特定宽度则设，否则设为默认 -->
    ></el-table-column>
  </el-table>
</template>

<style scoped>
.custom-width-col {
  /* 在这里编写你的CSS规则，例如 */
  width: {{ item.width }}px;  <!-- 如果width是一个变量，可以用{{}}语法引用它 -->
}
</style>

在这个例子中，`columns`是一个包含每个表头信息的对象数组，包括`prop`、`label`以及宽度`width`。当你需要调整某一列的宽度时，只需修改对应的`item.width`值即可。

相关问题

el-table下el-table-column有长有短，完善css样式，使el-table的父div变窄时，el-table中个元素不变形，宽度同步变化

在使用Element UI的`el-table`组件时，如果`el-table-column`的宽度不同，要使得表格在父容器宽度变化时元素不发生变形并且宽度同步变化，可以通过CSS样式来控制。以下是一些方法来确保表格的响应式表现：

1. 首先确保每个`el-table-column`都设置了`min-width`属性，这样即使在表格变窄时，列也不会窄到无法显示内容。同样，可以设置`max-width`属性来限制列的最大宽度，以防止过宽的情况。

2. 使用媒体查询（Media Queries）来定义不同屏幕宽度下表格列的宽度。例如，可以为较大的屏幕和较小的屏幕设置不同的列宽比例。

3. 对于`el-table`的父容器，设置`overflow-x: auto;`属性可以使得在父容器宽度不足以容纳整个表格宽度时，表格能够横向滚动而不是被压缩变形。

下面是一个简单的示例样式代码，展示了如何设置表格和列的基本样式以及媒体查询：

/* 基本样式 */
.el-table {
  width: 100%;
  border-collapse: collapse;
}

.el-table__column {
  min-width: 100px; /* 最小宽度 */
  max-width: 300px; /* 最大宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 媒体查询，为不同屏幕宽度设置不同的列宽 */
@media screen and (max-width: 768px) {
  .el-table__column {
    min-width: 80px;
    max-width: 200px;
  }
}

/* 父容器样式 */
.table-container {
  width: 100%;
  overflow-x: auto; /* 横向滚动 */
}

在HTML结构中使用上述样式：

<div class="table-container">
  <el-table>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" min-width="150"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</div>

确保父容器`.table-container`具有足够的宽度来包含`el-table`，并且在必要时可以通过CSS的媒体查询来调整`el-table`的样式。

<el-table :data="tableData" stripe> <el-table-column prop="id" label="ID" width="80" sortable></el-table-column> <el-table-column prop="content" label="地址"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template slot-scope="scope"> <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button> <el-popconfirm class="ml-5" confirm-button-text='确定' cancel-button-text='我再想想' icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.id)" > <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button> </el-popconfirm> </template> </el-table-column> </el-table> 添加注释

这段代码是使用 Element UI 的 el-table 组件渲染一个数据表格，其中 tableData 是传入的数据数组。每个 el-table-column 组件代表表格的一列，prop 属性指定列取值的属性名，label 属性指定列的标题，width 属性指定列的宽度，sortable 属性指定该列是否可排序。操作列包括编辑和删除两个按钮，用 el-button 组件实现，编辑按钮点击会触发 handleEdit 方法，删除按钮点击会触发一个带有确认弹窗的 del 方法。整个表格带有斑马纹效果，使用 stripe 属性实现。