Vue中Element的table多选表格如何实现单选

el-table组件的封装_el-table封装-CSDN博客

  data() {
    return {
      selectFlag: false,
      oldSelectRow: {},
      pagination: {
        pageNum: 1,
        pageSize: 20,
        total: 0
      },
      tableData: [],
      columns: [
        // {
        //   prop: 'xuanZe',
        //   label: '选择',
        //   minWidth: '60px',
        //   isSlot: true
        // },
        {
          prop: 'zhuanKeMC',
          label: '专科',
          minWidth: '100px'
        },
        {
          prop: 'buMenMC',
          label: '发票确认部门',
          minWidth: '120px'
        },
        {
          prop: 'caozuo',
          label: '操作',
          minWidth: '80px',
          isSlot: true
        }
      ],
      operations: [
        {
          text: '选择',
          type: 'text',
          class: 'el-text-color',
          callback: row => {
            this.handleXuanZeClick(row)
          }
        }
      ],
      tableInfo: {
        stripe: true,
        'highlight-current-row': true
      },
      selectionList: [],
      currentSelectData: {},
      events: {
        // 重点
        'selection-change': selection => {
          if (selection.length > 1) {
            const newRows = selection.filter((it, index) => {
              if (index == selection.length - 1) {
                this.$refs.publicTable.$refs.tableData.toggleRowSelection(it, true)
                return true
              } else {
                this.$refs.publicTable.$refs.tableData.toggleRowSelection(it, false)
                return false
              }
            })
            this.selectionList = newRows
          } else {
            this.selectionList = selection
          }
          this.$refs.publicTable.$refs.tableData.setCurrentRow(this.selectionList[0])
        },
        // 重点
        'row-click': row => {
          this.selectFlag = !this.selectFlag
          if (this.selectFlag) {
            this.$refs.publicTable.$refs.tableData.toggleRowSelection(row, true)
            this.selectionList.push(row)
            this.oldSelectRow = row
          } else {
            if (this.oldSelectRow === row.zhuanKeID) {
              this.$refs.publicTable.$refs.tableData.toggleRowSelection(row, false)
              this.oldSelectRow = {}
            } else {
              this.$refs.publicTable.$refs.tableData.toggleRowSelection(row, true)
                                      
          this.$refs.publicTable.$refs.tableData.toggleRowSelection(this.oldSelectRow, false)
            }
          }
        }
      }
    }
  },
  methods: {
    getRowKey(row) {
      return row.zhuanKeID
    },
  }