iview table 单选/多选获取选中行

超、凢脫俗 2021-09-17 20:28 1200阅读 0赞

# 单选/多选 获取选中行 #

## 单选 ##

通过设置属性 highlight-row，可以选中某一行。

当选择时，触发事件 @on-current-change，可以自定义操作，事件返回两个值 currentRow 和 oldCurrentRow，分别为当前行的数据和上一次选择的数据。

通过给 columns 数据设置一项，指定 type: ‘index’，可以自动显示一个从 1 开始的索引列。使用 indexMethod 可以自定义序号。

给 data 项设置特殊 key \_highlight: true 可以默认选中当前项。

调用 clearCurrentRow 方法可以手动清除选中项。

## 多选 ##

通过给 columns 数据设置一项，指定 type: ‘selection’，即可自动开启多选功能。

给 data 项设置特殊 key \_checked: true 可以默认选中当前项。

给 data 项设置特殊 key \_disabled: true 可以禁止选择当前项。

正确使用好以下事件，可以达到需要的效果：

*  @on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
 *  @on-select-all，点击全选时触发，返回值为 selection，已选项。
 *  @on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。

按照官网，试了N多种方法，但是都不能获取选中行  
查看源代码，发现有个getSelection方法

结果用这个方法解决了以下问题，记录一下：

包括：单选、多选列和列的渲染方式。

tableColumn: [
            {
              title: '',
              width: 60,
              align: 'center',
              type: 'selection'
            },
            {
              title: '规则实例名称',
              key: 'name'
            },
            {
              title: '规则模板类别',
              key: 'ruleType',
              render: (h, params) => {
                return h('div', [
                  h(
                    'div',
                    {
                      props: {
                        type: 'text',
                        size: 'small'
                      }
                    },
                    Filter.ruleTypeFilter(params.row.ruleTemplate.ruleType)
                  )
                ]);
              }
            },
            {
              title: '规则模板',
              key: 'templateName',
              render: (h, params) => {
                return h('div', [
                  h(
                    'div',
                    {
                      props: {
                        type: 'text',
                        size: 'small'
                      }
                    },
                    params.row.ruleTemplate.name
                  )
                ]);
              }
            },
            {
              title: '创建时间',
              key: 'createTime'
            },
            {
              title: '描述',
              key: 'description'
            },
            {
              title: '操作',
              key: 'action',
              minWidth: 250,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h(
                    'a',
                    {
                      style: {
                        display: 'inline-block',
                        height: '32px',
                        padding: '12px 10px'
                      },
                      props: {
                        type: 'text',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.updateModel = true;
                        }
                      }
                    },
                    '修改'
                  ),
                  h(
                    'a',
                    {
                      style: {
                        display: 'inline-block',
                        height: '32px',
                        padding: '12px 10px'
                      },
                      props: {
                        type: 'text',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.viewInstance = true;
                        }
                      }
                    },
                    '查看'
                  ),
                  h(
                    'a',
                    {
                      style: {
                        display: 'inline-block',
                        height: '32px',
                        padding: '12px 10px'
                      },
                      props: {
                        type: 'text',
                        size: 'small'
                      },
                      on: {
                        click: () => {
                          this.deleteInstance();
                        }
                      }
                    },
                    '删除'
                  ),
                  h(
                    'a',
                    {
                      style: {
                        display: 'inline-block',
                        height: '32px',
                        padding: '12px 10px'
                      },
                      props: {
                        type: 'text',
                        size: 'small'
                      }
                    },
                    '绑定指标'
                  )
                ]);
              }
            }
          ],

获取选中行的方法

handleSelectRow(selection, index) {
          console.log(this.$refs.selection.getSelection());
        },

以此记录以下，请各位大神赐教。