Table表头添加必选符+换行

最新推荐文章于 2024-05-17 14:58:26 发布

兜小糖的小秃毛

最新推荐文章于 2024-05-17 14:58:26 发布

阅读量630

点赞数

CC 4.0 BY-SA版权

分类专栏： Element框架常遇问题文章标签： javascript css vue.js html

本文链接：https://blog.youkuaiyun.com/Roy__Jason/article/details/106520396

Element框架常遇问题专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了如何在Element UI的Table组件中实现表头换行并添加必选红点，通过自定义渲染函数实现复杂表头布局，同时展示了如何使用Number Input组件限制输入范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Table表头添加必选符+换行

html部分

<el-table-column :label="'提货数量|('+tableHeader.sumDeliverNum+'件)'" align="center" :render-header="lineFeed">
  <template slot-scope="scope">
     <el-tooltip class="item" effect="dark" :content="'最大出库数量：'+scope.row.validNum" placement="top">
       <number-input decimal="10,0" :min="1" :max="scope.row.validNum"  v-model="scope.row.deliverCount"  @change="alterDeliverWeighit(scope.row)"></number-input>
     </el-tooltip>
  </template>
</el-table-column>

js部分

methods: {
  lineFeed(h, { column, $index }) { // Table表头换行+必选红点
    return h('span', {}, [
      h('span', { style: 'color: red' }, '*'),
      h('span', ' ' + column.label.split('|')[0]),
      h('br'),
      h('span', {}, column.label.split('|')[1])
    ])
  },
}