vue element-ui table 自定义表头样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
项目开发中,有时候会遇到对表头进行自定义添加样式的操作 如下图需求所示:
我们可以通过设置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 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)