el-table高度不断闪烁(特定分辨率出现)

Bug表现


这里只有名称没设置宽度,其他列都是固定宽度的。闪烁原因看起来是名称有字换行了。

解决方式

目前是调整了表格和弹窗的宽度解决的,但是不知道具体原因,不保证稳定解决。
期间也试过其他方法

  1. el-table设置height (可行)
  2. el-table设置style=“width: 100%”(无效)
  3. 给名称列设置宽度,另一列设为自适应 (可行)
  4. 给弹窗设置其他宽度 (可行)

出现问题的代码

<el-table :data="tableData"
              max-height="600"
              size="mini"
              element-loading-text="Loading">
              <el-table-column label="序号"
                type="index"

                width="50">
                <template slot-scope="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="名称" >
                <template slot-scope="scope">
                  <span>{{ scope.row.materialName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SN" width="130">
                <template slot-scope="scope">
                  <span>{{ scope.row.sn }}</span>
                </template>
              </el-table-column>
              <el-table-column label="IMEI" width="130">
                <template slot-scope="scope">
                  <span v-if="scope.row.deviceImei !== ''">{{ scope.row.deviceImei }}</span>
                  <span v-else>/</span>
                </template>
              </el-table-column>
              <el-table-column label="当前状态" width="180">
                <template slot-scope="scope">
                  <!-- <span>{{ formTemp.productAddr }}</span> -->
                  <el-tag size="small" type="primary" v-show="scope.row.deviceStatus === 10001">已产线出库</el-tag>
                  <el-tag size="small"
                    v-show="scope.row.deviceStatus === 10002"
                    color="#eddcbd"
                    style="color: #ce8706;">已入库</el-tag>
                  <el-tag size="small" v-show="scope.row.deviceStatus === 10003" type="info">已出库</el-tag>
                  <el-tag size="small" v-show="scope.row.deviceStatus === 10004" color="#e2fdf5">物流中</el-tag>
                  <el-tag size="small"
                    v-show="scope.row.deviceStatus === 10005"
                    color="#fbfba0"
                    style="color: #8d8d22;">物流丢失</el-tag>
                  <el-tag size="small" v-show="scope.row.deviceStatus === 10007" type="success">服务商已签收(物料申请)</el-tag>
                  <el-tag size="small"
                    v-show="scope.row.deviceStatus === 10008"
                    color="#ebd8f3"
                    style="color: #cf5cff;">信创运营已签收(退货申请)</el-tag>
                  <el-tag size="small"
                    v-show="scope.row.deviceStatus === 10009"
                    color="#fad0d738"
                    style="color: pink;">已安装</el-tag>
                  <el-tag size="small"
                    v-show="scope.row.deviceStatus === 10010"
                    color="#eddcbd"
                    style="color: #ce8706;">回收入库</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="生产时间" width="140">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
            </el-table>

你可能感兴趣的:(vue.js,elementui,前端)