最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对表给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考。
具体的使用方法还是建议仔细阅读官网表章节:
https://element.eleme.cn//应用/组件/表# table-column-scoped-slot
该项目演示已上传github,欢迎大家下载:
#克隆到本地
git克隆git@github.com: Hanxueqing/Element-table.git
#安装依赖
npm安装
#开启本地服务器localhost
npm运行开发
之前
项目地址:
https://github.com/Hanxueqing/Element-table
需求:在表格最后一栏添加操作按钮
通过slot-scope="范围"添加操作按钮,这是专门为我们提供的插槽,方便自定义添加不同的内容。
& lt;模板slot-scope=胺段А北?
& lt; el-button大?懊阅恪崩嘈?爸鳌弊４潜嗉? lt;/el-button>
& lt; el-button大?"迷你" type="危险"祝辞删除& lt;/el-button>
& lt;/template>
& lt;/el-table-column>
,
<强>
添加进来的操作按钮可以通过范围。美元指数可以获取当前行对应的下标
& lt; el-table-column标签=安佟弊骺矶?" 160 "比;
& lt;模板slot-scope=胺段А北?
& lt; el-button大?懊阅恪崩嘈?爸鳌贝緻click=皊howIndex(范围。美元指数)“在点击显示当前行下标& lt;/el-button>
& lt;/template>
& lt;/el-table-column>
之前
根据下标可以对指定某一行进行操作
通过scope.row。属性名可以获取当前行对应的属性值
& lt; el-table-column标签=安佟弊骺矶?" 160 "比;
& lt;模板slot-scope=胺段А北?
& lt; el-button大?懊阅恪崩嘈?爸鳌贝緻click=皊howName (scope.row.name)”在点击获取姓名属性& lt;/el-button>
& lt;/template>
& lt;/el-table-column>
之前
点击按钮获得当前行的名字属性值
可以通过scope.row。属性名和三目运算符给特殊的属性值设定样式
& lt; el-table-column道具="名称":label=" langConfig.table.name朗”宽度=" 200 "比;
& lt;模板slot-scope=胺段А北?
& lt; div: class=" scope.row.name===巴醮蠡ⅰ? # 63;“specialColor”:“在{{scope.row.name}} & lt;/div>
& lt;/template>
& lt;/el-table-column>
之前
编写specialColor样式,将字体颜色设置为红色
.specialColor {
颜色:红色;
}
之前
需求:将表头样式改为背景色蓝色,字体颜色白色,字重400
<强> header-cell-class-name
说明:表头单元格的类名的回调方法,也可以使用字符串为所有表头单元格设置一个固定的名字。
类型:函数({行、列、rowIndex columnIndex})/字符串
函数形式:将headerStyle方法传递给header-cell-class-name
& lt; el-table
(朗):数据=" https://www.yisu.com/zixun/tableData "
类="表"
条纹
边境
:header-cell-class-name=" headerStyle”
比;
之前
