项目开发中,有时候会遇到对表头进行自定义添加样式的操作  如下图需求所示:

我们可以通过设置slot来进行自定义表头样式   闲话不说,直接上代码 

<el-table-column align='center'> 
 <!-- 自定义头部 -->
 <template slot="header">
   <span class="btnWarn">*</span>
   <span>首次开课日期</span>
 </template>

 <template slot-scope="scope">
   <div class="itemStyle">
      <el-date-picker
         type="date"
         placeholder="选择日期"
         v-model="scope.row.lesson_start_time"
         value-format="yyyy-MM-dd"
         @change="getLessonMsg"
       ></el-date-picker>    
     </div>
   </template>
</el-table-column>

上述代码是有两个template  如果你的表格部分是纯数据展示的话 可以 直接使用props="XX"  来进行数据展示  代码如下:

<el-table-column align='center' prop="XX"> 
 <!-- 自定义头部 -->
 <template slot="header">
   <span class="btnWarn">*</span>
   <span>首次开课日期</span>
 </template>

</el-table-column> 

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐