element的table组件el-table通过方法动态改变样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
1. 首先< el-table >代码(属性尽可能多)
- 下面是一个table组件中,先有一个 type=“selection” 多选组件,然后是< template >循环列
- 把所有动态的属性值放在一个对象中tableStyle
- 使用以下两个方法改变表格的样式
:header-cell-style="headCellStyle" //表头
:cell-style="cellStyle" //行
<div id="building-top">
<el-table
:data="tableData"
border
:stripe="this.tableStyle.isStripe"
:height="this.tableStyle.height"
:highlight-current-row="this.tableStyle.hcr"
:show-summary="this.tableStyle.showSummary"
:header-cell-style="headCellStyle"
:cell-style="cellStyle"
>
<el-table-column v-if="this.tableStyle.checkbox" type="selection" width="55"></el-table-column>
<template v-for="(item, index) in keysData"><!--:fixed="fixed[index]"-->
<el-table-column
:fixed="item.fixed"
:sortable="item.sortable"
:prop="item.name"
:label="item.name"
width="200"
>
</el-table-column>
</template>
</el-table>
</div>
2. data
data() {
return {
//关于表格的样式
tableStyle:{
isStripe: false, //斑马纹
height: undefined, //表格高(固定高时使用)
hcr: false, //是否要高亮当前行
checkbox: false, //是否在最左侧列添加多选组件
showSummary: false, //是否在表尾显示合计行
//表头 在unTableAdapter()方法中初始化赋值
headTextAlign: 'left', //表头字体居左、居右、居中
headBackground: '#FFFFFF', //表头背景色
headColor: '#909399', //表头字体颜色
headFontWeight: '1000', //表头字体加粗
headHeight: '23', //表头的行高
//行
cellTextAlign: 'left', //行内字体居左、居右、居中
cellBackground: '#FFFFFF', //行内背景色
cellColor: '#606266', //行内字体颜色
cellFontWeight: '500', //行内字体加粗
cellHeight: '23', //行高
}
}
}
3. 两个修改样式的方法(初始化时运行即可生效)
methods: {
//头部
headCellStyle(row, rowIndex){
return 'text-align: ' + this.tableStyle.headTextAlign + //内容居左/中/右
';background: ' + this.tableStyle.headBackground + //背景色
';color: ' + this.tableStyle.headColor + //字体颜色
';font-weight: ' + this.tableStyle.headFontWeight + //字体加粗
';height: ' + this.tableStyle.headHeight + 'px;'
;
},
//行
cellStyle(row, rowIndex){
return 'text-align: ' + this.tableStyle.cellTextAlign + //内容居左/中/右
';background: ' + this.tableStyle.cellBackground + //背景色
';color: ' + this.tableStyle.cellColor + //字体颜色
';font-weight: ' + this.tableStyle.cellFontWeight + //字体加粗
';height: ' + this.tableStyle.cellHeight + 'px;'
;
}
}
4. 也可以直接在< style >中改变
- 修改表头背景
#building-top .el-table th{
background: #344067;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
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 5 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)