Web前端-Vue ElementUI点击Table 索引行获取index处理

野性酷女 2023-10-03 13:53 122阅读 0赞

需求：在table中row行 index = 0 ，作为区头，数据字符展示 "--"

参考组件 [Element - The world's most popular Vue UI framework][Element - The world_s most popular Vue UI framework]

1、table中有一个`:row-class-name="tableRowClassName"`属性，可以获取到当前行的index

将`:row-class-name属性`写在el-table标签上，如下：

<el-table
          ref="treeMultipleTable"
          v-loading="loading"
          :data="treeList"
          v-model="showAddRootBtn"
          v-if="showAddRootBtn==false"
          row-key="rootId"
          :row-class-name="tableRowClassName"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @select="treeSelect"
          @selection-change="handleSelectionChange"
        >
    
          <el-table-column type="selection" width="55" align="center" />
    
          <el-table-column prop="remark" label="备注" width="200" >
            <template slot-scope="scope" >
              <span>{
       { scope.row.index !== 0 ? scope.row.remark : '--' }}</span>
            </template>
          </el-table-column>
    
        </el-table>

2、**<template slot-scope="scope">**

element-ui中的table组件，是一个自定义列的模板

![70][]

template（模版） 在这里属于一个固定用法： **<template slot-scope="scope">**

**scope**

按照element上的提示：

通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据

我们可以理解为：tableData是给到table的记录集，scope是table内部基于tableData生成出来的，我们可以用Excel描绘一下

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATWluZ2dlUWluZ2NodW4_size_12_color_FFFFFF_t_70_g_se_x_16][]

我们传进去的tableData，在table内部生成了类似于Excel的scope，因此，通过scope.row.date，我们就可以读取到每一行中的date。

还有重要的一点，scope又并非是整个table，我们只是能通过scope.row获得当前的行数据

3、获取行之后，可以选择操作；把每一行的索引放进row

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

//js方法
    <script>
      export default {
        methods: {
          tableRowClassName({row, rowIndex}) {
              //把每一行的索引放进row
              row.index = rowIndex;
          }
        },
      }
    </script>

当然，我们还可以有其他操作，比如：设置某行样式不同，背景颜色不同等

//js方法
    <script>
      export default {
        methods: {
          tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
              return 'warning-row';
            } else if (rowIndex === 3) {
              return 'success-row';
            }
            return '';
          }
        },
      }
    </script>
    
    
    //样式
    <style>
      .el-table .warning-row {
        background: #ffffff;
      }
      .el-table .success-row {
        background: #f0f9eb;
      }
    </style>

[Element - The world_s most popular Vue UI framework]: https://element.eleme.cn/#/zh-CN/component/table
[70]: https://img-blog.csdn.net/20180822153249699?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RnOTI4NjAwNzc0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBATWluZ2dlUWluZ2NodW4_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1f51b76d825e485bbb6f47b0bce74d74.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATWluZ2dlUWluZ2NodW4=,size_12,color_FFFFFF,t_70,g_se,x_16