前段 多选框显示数据。单选框显示数据

 话不多说上代码

首先是 多选框显示数据

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
  <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>

const cityOptions = ['用户头像', '用户姓名', '手机号', '余额'];

data() {
  return {
    checkAll: false,
    checkedCities: ['用户头像', '用户姓名', '手机号', '余额'],
    cities: cityOptions,
    isIndeterminate: true,
    checked: true,
}
}

methods: {

  handleCheckAllChange(val) {
    this.checkedCities = val ? cityOptions : [];
    this.isIndeterminate = false;
  },
  handleCheckedCitiesChange(value) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === this.cities.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;

  },
}

---

 

单选框显示数据 

<div>
  <p>权限内容</p>
  <el-radio v-model="radio" label="1">备选项1</el-radio>
  <el-radio v-model="radio" label="2">备选项2</el-radio>
  <div v-if="radio==1">
   备选项1内容
  </div>
  <div v-if="radio==2">
   备选项2内容
  </div>
</div>

data() {
  return {
    radio: '1',
}
}