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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/H5_QueenStyle12/article/details/86535585

单选/多选 获取选中行

单选

通过设置属性 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方法

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

      <Table
        border
        ref="selection"
        :columns="tableColumn"
        :data="tableData"
        @on-selection-change="handleSelectRow()" >
      </Table>

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

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());
    },

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