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

24 篇文章 1 订阅
16 篇文章 0 订阅
<publicTable
 :row-key="getRowKey"
 ref="publicTable"
 class="table"
 :table-data="tableData"
 :table-info="tableInfo"
 :table-column="columns"
 :events="events"
 :is-need-pagination="false"
 :has-operation="false"
 :loading="loading"
 :need-select="true"
 >

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
    },
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值