Vue(element ui)中操作row参数的使用方式
作者：Xwzzz_
这篇文章主要介绍了Vue(element ui)中操作row参数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue(element ui)中操作row参数使用
在使用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来访问该行的每一个单元格数据
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。