element-ui 테이블에서 하나의 확인란만 선택할 수 있습니다.

해결 방법 1: el-table에서 직접 사용

그림과 같이 하나의 확인란만 선택할 수 있습니다

. 코드:

<el-table
          ref="multipleTable"
          :data="updatetableData"
          style="width: 100%"
          @selection-change="updatehandleSelectionChange"
          @select="select"
          @select-all="selectAll"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="精品名称"></el-table-column>
          <el-table-column prop="tag" label="排序">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort" />
            </template>
          </el-table-column>
        </el-table>

메서드에서:

toggleRowSelection: 다중 선택 테이블에 사용되며 행의 선택 상태를 토글하는 데 사용됩니다.

select(selection, row) {
    
    
      if (selection.length > 1) {
    
    
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
selectAll(selection){
    
    
      if (selection.length > 1) {
    
    
        selection.length = 1
      }
    }

해결 방법 2: el-table을 구성 요소로 캡슐화

myTable.vue로 캡슐화된 구성 요소

<el-table ref="tableRef">
	<el-table-column  @select-all="selectAll" @select="select"></el-table-column>
</el-table>

methods:{
    
    
	 select(selection) {
    
    
      if (selection.length > 1) {
    
    
        let del_row = selection.shift()
        this.$refs.tableRef.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
    
    
      if (selection.length > 1) {
    
    
        selection.length = 1
      }
    },
}

2. 하위 구성 요소에서 myTable 구성 요소 사용

import MyTable from './myTable.vue'
<my-table ref="selfTableRef"  @select-all="selectAll" @select="select">
</my-table>
methods: {
    
    
	select(selection) {
    
    
      this.$refs.selfTableRef.select(selection)
    },
    selectAll(selection){
    
    
     this.$refs.selfTableRef.selectAll(selection)
    },
}