Element-UI中关于table表格的样式操作
项⽬中使⽤到element-ui组件库，经常需要操作表格，编辑样式的过程中遇到⼀些问题，官⽹针对table给出了很多的api，⾃⼰可以⾃定义，基本能满⾜产品需求，但是没有给出具体的案例，⽹上的资料也⽐较简略，这⾥简单整理下⼀些常⽤的操作，如果有类似的功能可以做⼀个参考
具体的使⽤⽅法还是建议仔细阅读官⽹-table章节：
⾃定义列的内容
需求：在表格最后⼀栏添加操作按钮
image
通过slot-scope="scope"添加操作按钮，这是专门为我们提供的插槽，⽅便⾃定义添加不同的内容。
1 2 3 4 5<template slot-scope="scope">
<el-button size="mini"type="primary">编辑</el-button> <el-button size="mini"type="danger">删除</
el-button> </template>
</el-table-column>
image
scope.$index
添加进来的操作按钮可以通过scope.$index可以获取当前⾏对应的下标
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">点击显⽰当前⾏下标</el-button> </template>
</el-table-column>
根据下标可以对指定某⼀⾏进⾏操作
image
通过w.属性名可以获取当前⾏对应的属性值
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click = "w.name)">点击获取姓名属性</el-button> </template>
</el-table-column>
点击按钮获得当前⾏的name属性值
image
可以通过w.属性名和三⽬运算符给特殊的属性值设定样式
1
2 3 4 5<el-table-column prop="name":label="langConfig.table.name[lang]"width="200">
<template slot-scope="scope">
<div :class="w.name === '王⼤虎' ? 'specialColor':''">{{w.name}}</div> </template>
</el-table-column>
编写specialColor样式，将字体颜⾊设置为红⾊
.specialColor{
color:red;
}
设置表头样式
需求：将表头样式改为背景⾊蓝⾊，字体颜⾊⽩⾊，字重400
image
说明：表头单元格的 className 的回调⽅法，也可以使⽤字符串为所有表头单元格设置⼀个固定的 className。类型：Function({row, column, rowIndex, columnIndex})/String
函数形式：将headerStyle⽅法传递给header-cell-class-name
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-class-name="headerStyle"
>
编写headerStyle，返回class名称tableStyle
headerStyle ({row, column, rowIndex, columnIndex}) {
return 'tableStyle'
在style中编写tableStyle样式
<style lang = "scss">
.tableStyle{
background-color: #1989fa!important;
color:#fff;
font-weight:400;
}
</style>
字符串形式：直接将tableStyle名称赋值给header-cell-class-name
1
2 3 4 5 6 7<el-table
:data="tableData[lang]"
class="table"
stripe
border
header-cell-class-name="tableStyle" >
说明：表头单元格的 style 的回调⽅法，也可以使⽤⼀个固定的 Object 为所有表头单元格设置⼀样的 Style。类型：Function({row, column, rowIndex, columnIndex})/Object
weight的所有形式函数形式：将tableHeaderStyle⽅法传递给header-cell-style
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-style='tableHeaderStyle'
>
编写tableHeaderStyle⽅法，返回样式
tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
return'background-color:#1989fa;color:#fff;font-weight:400;'
}
对象形式：直接在对象中编写样式
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-style="{
'background-color': '#1989fa',
'color': '#fff',
'font-weight': '400'
}">
说明：表头⾏的className 的回调⽅法，也可以使⽤字符串为所有表头⾏设置⼀个固定的 className。
类型：Function({row, rowIndex})/String
使⽤⽅式与header-cell-class-name类似
注意：header-row-class-name与header-cell-class-name的区别：
header-row-class-name是添加在tr上⾯的，header-cell-class-name是添加在th上⾯的。
header-row-class-name:
image
所以想让添加在tr上的样式显⽰，需要关闭element-ui中原本的th的样式，否则会被覆盖！（例如背景⾊）
image
header-cell-class-name:
image
说明：表头⾏的 style 的回调⽅法，也可以使⽤⼀个固定的 Object 为所有表头⾏设置⼀样的 Style。
类型：Function({row, rowIndex})/Object
使⽤⽅式与header-cell-style类似
需求：将表格中⾏的背景⾊设置为浅蓝⾊
image
说明：⾏的 className 的回调⽅法，也可以使⽤字符串为所有⾏设置⼀个固定的 className。类型：Function({row, rowIndex})/String
使⽤⽅式与
header-cell-class-name类似
说明：⾏的 style 的回调⽅法，也可以使⽤⼀个固定的 Object 为所有⾏设置⼀样的 Style。
类型：Function({row, rowIndex})/Object
使⽤⽅式与header-cell-style类似
函数形式：将tableRowStyle⽅法传给row-style
1 2 3 4 5 6<el-table
:data="tableData[lang]"
class="table"
border
:row- >
编写tableRowStyle⽅法，返回样式// 修改table tr⾏的背景⾊
1 2 3tableRowStyle ({ row, rowIndex }) { return'background-color:#ecf5ff' }
需求：点击操作栏的按钮，切换按钮状态，并且将当前⾏置灰
image
通过slot-scope添加按钮
1 2 3 4 5 6<el-table-column label="操作"width="160">
<template slot-scope="scope">
<el-button size="mini"type="danger"plain v-if= "w.buttonVisible"@click= "w.buttonVisible,scope.$index)">禁⽤该⾏</el-button>
<el-button size="mini"type="primary"plain v-else@click= "w.buttonVisible,scope.$index)">启⽤该⾏</el-button>
</template>
</el-table-column>
在每⼀个data中添加buttonVisible字段，使⽤v-if/v-else指令实现按钮的显⽰与隐藏
1 2 3 4 5{
date: '2016-05-10',
name: '王⼤虎',
address: '上海市普陀区⾦沙江路 1518 弄', zip: 200333,
buttonVisible: true
6 7 }
编写changeTable⽅法，点击按钮的时候更改buttonVisible的值
1 2 3changeTable (buttonVisible, index) {
this.tableData[index].buttonVisible = !buttonVisible }
给el-table添加row-style，并且将tableRowStyle⽅法传递给row-style
1 2 3 4 5 6<el-table
:data="tableData"
class="table"
border
:row- >
编写tableRowStyle⽅法，根据每⼀⾏buttonVisible的值设置背景⾊
1 2 3 4 5 6// 修改table tr⾏的背景⾊
tableRowStyle ({ row, rowIndex }) {
if(this.tableData[rowIndex].buttonVisible === false) { return'background-color: rgba(243,243,243,1)'
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论