列表单选.png

      <div class="enterpriseList">
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
          :row-class-name="selectRowClassName">
          <el-table-column type="selection" width="30" />
          <el-table-column prop="num" label="编号" width="40" />
          <el-table-column prop="companyname" label="公司名称" width="150" />
          <el-table-column prop="code" label="公司编号" width="100" />
          <el-table-column prop="username" label="用户姓名" width="80" />
          <el-table-column prop="phone" label="手机号" width="100" />
          <el-table-column prop="emil" label="邮箱" width="100" />
          <el-table-column prop="isCheck" width="100" label="审核状态">
            <!-- 自定义的列 -->
            <template v-slot="scope">
              <div v-if="scope.row.status == 1" style="color:#DF0024">未审核</div>
              <div v-else style="color:#00A756">已审核</div>
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="150" />
        </el-table>
      </div>

 data() {
    return {
      enterpriseName: '',
      userName: '',
      tableSelect: [],
      tableData:[
  {
    num: '1',
    companyname: '信息技术股份有限公司',
    code: '1000000001',
    username: '张三',
    phone: '12345678901',
    emil: '123@3467890.com',
    status: '2',
    remarks: '柔荑花郭汝瑰还是',
  },
  {
    num: '2',
    companyname: '信息技术股份有限公司',
    code: '1000000001',
    username: '张三',
    phone: '12345678901',
    emil: '123@3467890.com',
    status: '2',
    remarks: '柔荑花郭汝瑰还是',
  },
  {
    num: '3',
    companyname: '信息技术股份有限公司',
    code: '1000000001',
    username: '张三',
    phone: '12345678901',
    emil: '123@3467890.com',
    status: '1',
    remarks: '柔荑花郭汝瑰还',
  },
  {
    num: '4',
    companyname: '信息技术股份有限公司',
    code: '1000000001',
    username: '张三',
    phone: '12345678901',
    emil: '123@3467890.com',
    status: '2',
    remarks: '柔荑花瑰还是',
  },
]
     
    }
  },
  methods: {
    selectRowClassName({ row }) {//添加表格行点击样式--rowIndex 
      let color = "";
      this.tableSelect.forEach(item => {
        if (item.num === row.num) {
          color = "current";
        }
      });
      return color;
    },
    handleSelectionChange(val) {//表格选中事件
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(val.pop());
        // console.log('val')

      } else {
        this.tableSelect = val;
        // console.log('tableSelect', this.tableSelect)
      }
    },
  },

样式从中间截得 不确定全不全 可自行更改

 .enterpriseList {
      border: 1px solid #E1E1E1;
      border-bottom: none;
      margin-top: 10px;

      :deep (.el-table__body),
      :deep (.el-table__header) {
        width: 100% !important;
      }

      :deep (.el-table .cell) {
        text-align: center;
      }

      :deep(.el-table td.el-table__cell) {
        border-bottom: 1px solid #E1E1E1;
        padding: 10px 0;
      }

      :deep (.el-table__header) {

        //隐藏多选框 
        .el-checkbox {
          display: none;
        }
      }

      :deep(.el-table__body .current>td)  {
        background-color: #F5F8FF !important;
      }
    }