element UI表格使用cell-style改变单元格样式
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
【例子1】
// 调用方法的部分为:
<el-table
:cell-style="timeStyle"
>
// 要修改样式的部分为:
<el-table-column
label="创建时间"
:formatter="startTime"
width="150">
// 方法:
methods:
// 改变表格中时间的字体样式:调小
timeStyle(column) {
if(column.columnIndex === 2 || column.columnIndex === 4) {
return "font-size: 2px"
【例子2】
<el-table
:data="testCases"
stripe
border
size="small"
row-key="id"
:max-height="maxHeight"
@selection-change="selectionChange"
@filter-change="filterChange"
:cell-style="cellStyle"
ref="table">
<el-table-column
show-overflow-tooltip
width="100"
label="测试结果"
prop="testResult"
sortable>
<template slot-scope="scope">
<input class="custom_input" v-if="scope.row.id===idFocused" v-model="scope.row.testResult"
@blur="idFocused=''" @keyup.enter="idFocused = ''">
<span v-else>{{scope.row.testResult}}</span>
</template>
</el-table-column>
cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式,成功-绿色,失败-红色,不支持-黄色
let cellStyle;
switch (row.testResult) {
case '成功':
cellStyle = 'background: green;color:white';
break;
case '失败':
cellStyle = 'background: red;color:white';
break;
case '不支持':
cellStyle = 'background: #aaa;color:white';
break;
default:
cellStyle = '';
}
if (column.label == '测试结果')
return cellStyle;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
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 个月前
更多推荐
已为社区贡献31条内容
所有评论(0)