ant或者elment的单选按钮和复选框设置只读

luback

已于 2023-09-25 10:12:04 修改

阅读量729

点赞数

文章标签：前端 vue elementui reactjs anti-design-vue

于 2023-09-21 10:44:03 首次发布

本文链接：https://blog.csdn.net/luback/article/details/133126836

版权

react + ant

<div className='look-box'>
  <Radio.Group defaultValue={data?.answer}>
      <Space direction="vertical">
          {data.contentList.map((dd,index)=> (
              <Radio value={dd.id?dd.id:index}>{dd.text}</Radio>
           ))}
      </Space>
  </Radio.Group>
</div>

inde.less文件

.look-box  /deep/ .ant-radio-group{
  pointer-events: none !important;
}
.look-box /deep/ .ant-checkbox-group{
  pointer-events: none !important;
}

vue + element

<div class="look-box">
  <el-radio-group v-model="currentAnswer" @change="onChange">
    <el-radio :label="dd.id" v-for="dd in item.contentList" :key="dd.id">
       {{dd.text}}   
     </el-radio>
  </el-radio-group>
   <el-checkbox-group v-model="currentAnswer" @change="onChange" >
      <el-checkbox :label="dd.id" v-for="dd in item.contentList" :key="dd.id">
          {{dd.text}}
      </el-checkbox>
   </el-checkbox-group>
</div>

样式

<style scoped lang='less'>
.look-box /deep/ .el-radio{
  display: block;
  pointer-events: none;
  margin:10px 0;
  width: 100%;
  height: auto !important;
}
.look-box /deep/ .el-checkbox{
  display: block;
  margin:10px 0;
  pointer-events: none;
  width: 100%;
  height: auto !important;
}
.look-box /deep/ .el-checkbox__label{
  display: initial;
}
</style>