search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.29k stars 3.25k forks source link

[vue] 使用Element UI表格如何设置列宽的宽度自适应？ #2553

Open haizhilin2013 opened 4 years ago

haizhilin2013 commented 4 years ago

使用Element UI表格如何设置列宽的宽度自适应？

3+1官网

我也要出题

tomieric commented 4 years ago

https://kuaizi-co.github.io/kz-table/ 列宽自适应

crush2020 commented 3 years ago 
      <template>
        <el-table :data="tableData" border style="width: 100%" :height="height -75 + 'px'">
          <el-table-column prop="Name" label="区域名字"> </el-table-column>
          <el-table-column prop="AreaTypeName" label="区域类型">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="145">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

如上面的实例 设置el-table的style="width: 100%"，不设置el-table-column每一列的宽度，每一列即可自适应，当设置一列el-table-column的宽度为固定时，其他列不设置，均为自适应宽度。

nadirvishun commented 2 months ago 
      <template>
        <el-table :data="tableData" border style="width: 100%" :height="height -75 + 'px'">
          <el-table-column prop="Name" label="区域名字"> </el-table-column>
          <el-table-column prop="AreaTypeName" label="区域类型">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="145">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>

如上面的实例 设置el-table的style="width: 100%"，不设置el-table-column每一列的宽度，每一列即可自适应，当设置一列el-table-column的宽度为固定时，其他列不设置，均为自适应宽度。

这样不行。