vue 实现表格点击单选、多选

单选

vue 实现表格点击单选、多选_第1张图片

添加 ref属性名 在表格上加@selection-change事件 在表格上加@row-click单击事件可以实现点击行单选

/** 单击选中行数据 */
    clickRow(row) {
      this.$refs.tb.toggleRowSelection(row)
    },
    userHandleSelectionChange(selection) {
      // 单选
      if (this.isSingle) {
        this.checkUser = selection[0]
        if (selection.length > 1) {
          this.$refs.tb.clearSelection()
          this.$refs.tb.toggleRowSelection(selection.pop())
        }
      } else {
        this.checkUser = selection
      }
    },

这个方法可以保证每次都是选择最后点击的那行

多选

vue 实现表格点击单选、多选_第2张图片

在表格上添加@selection-change方法

 // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.teamId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

selection即为选中的多个数据的数组

你可能感兴趣的:(vue.js,前端,javascript)