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

2023-12-26 17:23:29
<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
    },
  }

文章来源:https://blog.csdn.net/Achong999/article/details/135223485
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。