元素界面中关于表的操作(总结)

最近的项目中使用了element-ui组件库。因为是后台管理系统，经常需要操作表格。在编辑样式的过程中存在一些问题。官网给出了很多针对table的API，可以自己定制，基本满足产品要求。然而，没有给出具体的案例，互联网上的信息也相对简短。在这里，我们简单整理一些常见的操作。如果有类似的功能，我们可以做个参考。

建议仔细阅读官方网站-表格部分了解具体用法：

https://element . eleme . CN/#/zh-CN/component/table #表-列范围-槽

这个项目的演示已经上传到github，欢迎大家下载：

#克隆到本地git clone[email protected]: hanxueqing/element-table . git #安装依赖于npm install#打开本地服务器localhostnpm运行dev项目地址：

https://github.com/Hanxueqing/Element-table

自定义列内容

要求：在表的最后一列添加一个操作按钮

通过slot-scope='scope '添加操作按钮，这是专门为我们提供的一个槽，方便自定义添加不同的内容。

模板槽-范围='范围' El-button size=' mini ' type=' primary ' edit/El-button El-button size=' mini ' type=' dancer ' delete/El-button/模板/El-table-column

范围。$index获取当前行的下标

添加的操作按钮可以通过范围获取当前行对应的下标。$索引

El-table-column label=' operation ' width=' 160 '模板slot-scope=' scope ' El-button size=' mini ' type=' primary ' plain @ click=' show index(作用域。$ index)点击显示当前行下标/El-按钮/模板/El-表格-列。根据下标，可以操作指定的行

Scope.row获取当前属性值

对应于当前行的属性值可以通过scope.row.attribute name获得

El-table-column标签=' operation ' width=' 160 ' template slot-scope=' scope ' El-button size=' mini ' type=' primary ' plain @ Click=' show name(scope . row . name)单击获取名称属性/El-button/template/El-table-column获取当前行的名称属性值

您可以通过scope.row. attribute名称和三项式运算符来设置特殊属性值的样式

El-table-column prop=' name ' : label=' langconfig . table . name[lang]width=' 200 '模板slot-scope=' scope ' div 3360 class=' scope . row . name='王大虎'？SpecialColor ' : ' ' ' { { scope。row . name } }/div/template/El-table-column编写一种特殊的颜色样式，并将字体颜色设置为红色。specialColor { color:red}设置标题样式

要求：将页眉样式改为蓝色背景色，白色字体颜色，400字

标题-单元格-类名

描述：标题单元格的类名的回调方法也可以使用字符串为所有标题单元格设置一个固定的类名。

类型：函数({行、列、行索引、列索引})/字符串

函数形式：将headerStyle方法传递给header-cell-class-name

El-table : data=' tabledata[lang]' class=' table ' strip border : header-cell-class-name=' headerStyle '写入header style并返回类名tableStyle

Headerstyle ({row，column，rowindex，column index }){ return ' tableStyle ' }以样式编写tableStyle样式

style lang=' scss '。tableStyle { background-color : # 1989 fa！重要；color: # ffffont-weight :400；}/style字符串形式：直接将tableStyle名称赋给header-cell-class-name

El-table : data=' tableData[lang]' class=' table '条纹边框标题-单元格-类-名称='tableStyle '标题-单元格样式

注意：标题单元格样式的回调方法也可以使用一个固定的对象为所有标题单元格设置相同的样式。

类型：函数({行、列、行索引、列索引})/对象

函数形式：将tableHeaderStyle方法传递给header单元格样式

El-table : data=' tabledata[lang]' class=' table ' strip border : header-cell-style=' tableHeaderStyle '编写tableheader style方法并返回样式

tableHeaderStyle ({row，column，rowIndex，column index }){ return '底色： # 1989 facolor : # fff ' font-weight :400；'}对象形式：直接在对象中编写样式

El-table : data=' table data[lang]' class=' table '条纹边框：标题-单元格-样式=' { '背景色' : ' # 1989 fa '，'颜色' : '#fff '，'字体粗细' : ' 400 ' } '标题-行-类名

说明：表头行的类名的回调方法，也可以使用字符串为所有表头行设置一个固定的类名。

类型：函数({row，rowIndex})/String

使用方式与标题-单元格-类名类似

注意：标题-行-类名与标题-单元格-类名的区别：

标题-行-类名是添加在tr上面的，标题-单元格-类名是添加在泰国(泰国)上面的。

标题行类名：

所以想让添加在tr上的样式显示，需要关闭元素用户界面中原本的泰国(泰国)的样式，否则会被覆盖！（例如背景色)

标题-单元格-类名：

标题行样式

说明：表头行的风格的回调方法，也可以使用一个固定的目标为所有表头行设置一样的风格。

类型：函数({行，行索引})/对象

使用方式与标题单元格样式类似

设置行样式

需求：将表格中行的背景色设置为浅蓝色

行类名

说明：行的类名的回调方法，也可以使用字符串为所有行设置一个固定的类名。

类型：函数({row，rowIndex})/String

使用方式与标题-单元格-类名类似

行样式

说明：行的风格的回调方法，也可以使用一个固定的目标为所有行设置一样的风格。

类型：函数({行，行索引})/对象

使用方式与标题单元格样式类似

函数形式：将tableRowStyle方法传给行样式

El-table : data=' table data[lang]' class=' table '边框：row-style='tableRowStyle '编写tableRowStyle方法，返回样式

//修改表tr行的背景色tableRowStyle ({ row，row index }){ return ' background-color : # ecf5ff ' }点击按钮操作当前行

需求：点击操作栏的按钮，切换按钮状态，并且将当前行置灰

通过插槽范围添加按钮

El-表格-列标签='操作宽度='160 '模板slot-scope=' scope ' El-button size=' mini ' type=' danger '普通v-if=' scope。划船。按钮可见‘@ click=’更改表(范围。划船。按钮可见，范围.$index)'禁用该行/El-button El-button size=' mini ' type=' primary ' plain v-else @ click=' change table(作用域。划船。按钮可见，范围.$index)'启用该行/El-按钮/模板/El-表格-列在每一个数据中添加按钮可见字段，使用如果/否则指令实现按钮的显示与隐藏

{ date: '2016-05-10 '，name: '王大虎，地址： '上海市普陀区金沙江路1518 弄，zip: 200333，buttonVisible: true }编写变更表方法，点击按钮的时候更改按钮可见的值

更改表(按钮可见，索引).buttonVisible=！按钮可见}给埃尔表添加行式的，并且将tableRowStyle方法传递给行样式

El-table : data=' table data ' class=' table '边框：row-style='tableRowStyle '编写tableRowStyle方法，根据每一行按钮可见的值设置背景色

//修改表tr行的背景色tableRowStyle ({ row，row index }){ if(this。table data[行索引].buttonVisible===false){ return '底色： rgba(243，243，243，1)' } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。