vue + element ui table表格多选改单选

<el-table
    ref="multipleTable"
    :data="LogisticstableData"
    :header-cell-style="{background:'#eef1f6',color:'#909399'}"
     border
     style="width: 100%"
     fixed
     @select="select"
     @row-click="rowClick"
     @selection-change="selectionChange"
     @select-all="onSelectAll"
     stripe>
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>                      
</el-table>
select (selection, row) {
		// 清除所有选中
      this.$refs.multipleTable.clearSelection()
      if (selection.length === 0) return
      // 将当前点击项选中
      this.$refs.multipleTable.toggleRowSelection(row, true)
},
selectionChange (val) {
      console.log('selectionChange', val)
      this.selectData = val
},
rowClick (row, column) {
      const selectData = this.selectData
      this.$refs.multipleTable.clearSelection()
      if (selectData.length === 1) {
        selectData.forEach(item => {
          if (item === row) {
            this.$refs.multipleTable.toggleRowSelection(row, false)
          } else {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
      } else {
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
},
onSelectAll () {
      this.$refs.multipleTable.clearSelection()
},

版权声明:本文为mqq_12原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。