当前位置: 首页 > article >正文

el-table单独某列自适应文字换行

需求:表格中可生产车型描述次列需要设置文字自动换行处理

    <el-table
        ref="refTable"
        :data="tableData"
        :header-cell-style="{ background: '#F5F7FA', height: '30px' }"
        style="width: 100%; margin: 0 auto"
        height="100%"
        align="center"
        row-key="id"
        stripe
        border
      >
        <el-table-column
          v-for="item in viewColumns"
          :key="item.label"
          :fixed="item.fixed"
          :prop="item.prop"
          :align="item.align"
          :label="item.label"
          :min-width="item.width"
        >
          <template slot-scope="scope">
            <!-- 仅当prop为productionCarModelText时,添加word-wrap-column类 -->
            <div v-if="scope.column.prop === 'productionCarModelText'" class="word-wrap-column">
              {{ scope.row.productionCarModelText }}
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
   viewColumns: [
        { prop: 'productCode', width: '150', align: 'center', label: '产品编码', fixed: false },
        { prop: 'productionCarModelCode', width: '160', align: 'center', label: '可生产车型编码', fixed: false },
        { prop: 'instantiateCarModel', width: '130', align: 'center', label: '实例化车型', fixed: false },
        { prop: 'exteriorColor', width: '100', align: 'center', label: '外饰色', fixed: false },
        { prop: 'interiorColor', width: '100', align: 'center', label: '内饰色', fixed: false },
        { prop: 'productionCenter', width: '110', align: 'center', label: '生产中心', fixed: false },
        { prop: 'productionCarModelText', width: '350', align: 'center', label: '可生产车型描述', fixed: false },
        { prop: 'carModelStatus', width: '100', align: 'center', label: '车型状态', fixed: false },
        { prop: 'creatDate', width: '120', align: 'center', label: '创建日期', fixed: false }
      ],
   tableData: [
              { id: 1, productCode: '1H4HK5111DH****000', productionCarModelCode: '1H4HK5111DH****000', instantiateCarModel: '', interiorColor: '2D', exteriorColor: '1AD', productionCenter: 'EV', productionCarModelText: '车身型式:SUV汽油发动机,变速器及驱动型,设计与顾客基础:俄罗斯+标准型,外饰:金属漆古檀棕 内饰:黑色,喜好:黑色的鞋子,高端大气上档次,凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数凑字数', carModelStatus: '未准备完成', creatDate: '2017-06-22', isCalculated: '否', stopProductionUser: '', stopProductionDate: '' }

      ],
<script>
.word-wrap-column{
    word-break: break-word; // word-wrap: 这个属性已经被 word-break 所取代,但还能用
    white-space: normal;
  }

</script>

最后就实现了


http://www.kler.cn/a/500917.html

相关文章:

  • Maven核心插件之maven-resources-plugin
  • mysql本地安装和pycharm链接数据库操作
  • 【2024年华为OD机试】(A卷,100分)- 单词倒序(Java JS PythonC/C++)
  • Linux (CentOS) 安装 Docker 和 Docker Compose
  • 【巨实用】Git客户端基本操作
  • 蓝桥云客第 5 场 算法季度赛
  • Meilisearch ASP.Net Core API 功能demo
  • 自动化测试脚本实践:基于 Bash 的模块化测试框架
  • 基于Springboot美食推荐商城系统【附源码】
  • 14. 以太网接口
  • linux-28 文本管理(一)文本查看,cat,tac,more,less,head,tail
  • Nginx 配置支持 HTTPS 代理
  • 计算机类-数据结构课程推荐
  • 《拉依达的嵌入式\驱动面试宝典》—操作系统篇(一)
  • Maven 仓库的分类
  • Cisco认证是Cisco公司建立的网络技术证书体系
  • C#解决浮点数精度丢失的问题(参考方案)
  • [DO374] Ansible 配置文件
  • 云服务器加了安全组端口还是无法访问
  • 一分钟学会文心一言API如何接入,文心一言API接入教程
  • 基于 JavaEE 的影视创作论坛
  • fitz获取pdf内容
  • 浅谈云计算04 | 云基础设施机制
  • 游戏引擎学习第78天
  • SmartScanner:智能化网络漏洞扫描的未来先锋