美文网首页让前端飞
element Table 表格 多选框改成单选

element Table 表格 多选框改成单选

作者: 潇潇芭蕉 | 来源:发表于2022-07-04 10:19 被阅读0次
    列表单选.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;
    
          ::v-deep .el-table__body,
          ::v-deep .el-table__header {
            width: 100% !important;
          }
    
          ::v-deep .el-table .cell {
            text-align: center;
          }
    
          ::v-deep .el-table td.el-table__cell {
            border-bottom: 1px solid #E1E1E1;
            padding: 10px 0;
          }
    
          ::v-deep .el-table__header {
    
            //隐藏多选框 
            .el-checkbox {
              display: none;
            }
          }
    
          ::v-deep .el-table__body .current>td {
            background-color: #F5F8FF !important;
          }
        }
    
    

    相关文章

      网友评论

        本文标题:element Table 表格 多选框改成单选

        本文链接:https://www.haomeiwen.com/subject/fxldbrtx.html