Vue(element ui)中行操作row参数的使用
2023-09-11 14:19:18 时间
在使用element ui或Vue中当我们要对表格中的数据按行进行特殊操作或标记时,通常通过在vue中methods方法中操作row参数来访问该行的索引或是单元格中的数据进行对应操作。
样式表格中
<el-table :data="tableData" :row-class-name="tableRowClassName">
<el-table-column prop="USER_CODE" label="工号" width="100">
</el-table-column>
<el-table-column prop="USER_NAME" label="姓名" width="100">
</el-table-column>
<el-table-column prop="USER_DEPARTMENT" label="部门">
</el-table-column>
<el-table-column prop="USER_DEPARTMENT_CODE" label="部门号" width="100">
</el-table-column>
<el-table-column prop="IP_ADDRESS" label="地址" width="100">
</el-table-column>
<el-table-column prop="LOGIN_TIME" label="ip地址">
</el-table-column>
</el-table>
Vue中
methods: {
tableRowClassName: function (row) {
console.log(row)
if (row.rowIndex === 1) {
return 'warning-row';
} else if (row.rowIndex === 3) {
return 'success-row';
}
return '';
}
通过row.rowIndex===?可以访问当前行的索引,就可以通过指定 Table 组件的row-class-name属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
与此同时我们也可以通过row来访问该行的每一个单元格数据
相关文章
- vue Element-UI组件
- vue的全局指令
- 浅谈 vue实例 和 vue组件
- vue-router的使用
- [Vue @Component] Pass Vue Render Functions as Props for Powerful Patterns
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
- [Vue] Get up and running with vue-router
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载
- vue- element-ui table复选框翻页记忆与清除
- vue.js3: base64编码/解码(vue@3.2.37)
- 【视频】vue表单提交
- Vue实现MVVM
- SAP Fiori和Vue的结合会给企业级应用软件的UI开发带来什么?
- standalone vue initialization process - Vue应用的初始化过程
- Atititi ui之道 attilax著 v3 s11.docx 1. 概览2 1.1. 软件设计可分为两个部分:编码设计与UI设计2 2. 用户界面设计的三大原则是:置界面于用户的控制之下;
- npm ERR! Could not resolve dependency:npm ERR! peer vue@“^2.5.17“ from element-ui@2.15.12
- vue element-ui 分页组件封装
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- 一分钟理清Vue-cli 代码构建步骤。
- 222:vue+openlayers 实现云雾缭绕,白鸽飞翔的效果
- 182:vue+openlayers 使用d3实现地图区块呈现不同颜色的效果
- 146: vue+openlayers 画多边形,每个转折点style用圆点标识
- vue定义全局变量和全局方法
- 在Vue中如何修改element UI组件的样式(deep 深度选择器)
- vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(七)商品管理
- vue+element ui+腾讯云开发打造会员管理系统之实战教程(二)环境搭建
- vscode 设置 vue文件不自动换行