elementui table 实现单选

参考：https://www.jb51.net/article/257112.htm

  <el-table class="elTable" ref="processDataTable"
                                 :row-style="rowStyle"
                                 :data="processDataList"
                                 load = "true"
                                 :header-cell-style="headerCellStyle"
                                 @select="processSelectChange"
                                 @selection-change="handleSelectionChange"
                                 @row-click="rowClick"
                                 v-loading="listLoading"
                                 element-loading-text="加载中">
                           <el-table-column type="selection" width="55" ></el-table-column>
                           <el-table-column prop="id" label="id" width="80" v-if="1==2"></el-table-column>
                          ……
                       </el-table>

vue：

data:

processSelect:{},//用于表格选择数据集

method():

  processSelectChange(selection, row) {
                    // 清除 所有勾选项
                    this.$refs.processDataTable.clearSelection()
                    // 当表格数据都没有被勾选的时候 就返回
                    // 主要用于将当前勾选的表格状态清除
                    if(selection.length == 0) return
                    this.$refs.processDataTable.toggleRowSelection(row, true);
                },
                handleSelectionChange(val) {
                    this.processSelect = val;
                },
                rowClick(row, column) {
                    const selectData = this.processSelect
                    this.$refs.processDataTable.clearSelection()
                    if( selectData.length == 1 ) {
                        selectData.forEach(item => {
                            // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
                            if (item == row) {
                                this.$refs.processDataTable.toggleRowSelection(row, false);
                            }
                            // 不然就让当前的一行勾选
                            else {
                                this.$refs.processDataTable.toggleRowSelection(row, true);
                            }
                        })
                    }
                    else {
                        this.$refs.processDataTable.toggleRowSelection(row, true);
                    }
                },