Vue里的ElementUi点击行如何获取 Table 的行索引

小咪咪 2023-05-22 04:41 18阅读 0赞

文档中有一个`:row-class-name="tableRowClassName"`属性，可以获取到当前行的index, 看下面代码，注意 `:row-class-name`是写在el-table标签上的，不要写错了位置哦！

<template>
      <el-table
        :data="tableData2"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
      </el-table>
    </template>
    
    <style>
      .el-table .warning-row { 
        background: oldlace;
      }
      .el-table .success-row { 
        background: #f0f9eb;
      }
    </style>
    
    <script>
      export default { 
        methods: { 
          tableRowClassName({ row, rowIndex}) { 
            if (rowIndex === 1) { 
              return 'warning-row';
            } else if (rowIndex === 3) { 
              return 'success-row';
            }
            return '';
          }
        },
        data() { 
          return { 
            tableData2: [{ 
              date: '2016-05-02',
              name: '王小虎'
            }, { 
              date: '2016-05-04',
              name: '王小虎'
            }]
          }
        }
      }
    </script>

只要将方法，构造成这样：把每一行的索引放进row

tableRowClassName ({ row, rowIndex}) { 
          // 把每一行的索引放进row
          row.index = rowIndex;
    }

构造row的index，后续用到时只需要row.index获取索引，从0开始

转载自 ：http://www.manongjc.com/article/50333.html