elementui表格单选

服务挂了 刚好抽时间把在做的这个功能记录一下

<template>
  <div class="flow_dialog">
    <el-dialog
      class="flow_dialog"
      :visible.sync="showVariable"
      :close-on-click-modal="false"
      width="720px"
    >
      <div slot="title" class="flow_dialog_title">
        <span>选择变量</span>
      </div>
      <el-table
        size="medium"
        :height="300"
        :data="defaultVariable"
        ref="variableSelectTable"
        @select="selectChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="variableName" label="变量名" min-width="120"></el-table-column>
        <el-table-column prop="variableKey" label="变量Key" min-width="120"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="save">保存</el-button>
        <el-button size="mini" @click="showVariable = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      showVariable: false,
      selectRow: {}
    };
  },
  computed: {
    ...mapState({
      defaultVariable: state => state.workflow.globalInformation.variable
    })
  },
  methods: {
    selectChange(selection, row) {
     if (selection.length) {
        // 清除所有选中
        this.$refs.variableSelectTable.clearSelection();
        // 将当前点击项选中
        this.$refs.variableSelectTable.toggleRowSelection(row, true);
        this.selectRow = row;
      } else {
        this.$refs.variableSelectTable.toggleRowSelection(row, true);
        return;
      }
    },
    save() {}
  }
};
</script>

<style>
thead th .cell .el-checkbox {
  display: none !important;
}
.el-checkbox__inner {
  border-radius: 50% !important;
}
</style>```