Foshan4A4.0/src/components/rolelist/index.vue

<template>
  <div class="bf-rolelist">
    <!-- 角色列表 -->
    <div class="cont">
      <div v-if="title" class="paren_header">
        <p>{{ title }}</p>
      </div>
      <template v-if="dataList.length">
        <div :class="active ? 'bgActive' : 'bgActivecheckbox'" class="paren_content">
          <el-scrollbar style="height: 100%">
            <template v-if="!type">
              <el-row :gutter="16">
                <el-checkbox-group @change="checkChange" v-model="checkList">
                  <el-col :span="number" v-for="(item, index) in dataList" :key="index">
                    <div @click="handleBg(item, index)" :class="active && msg === index ? 'bgColor' : ''" class="cide">
                      <div class="cide_header">
                        <p :title="item.name">{{ item.name }}</p>
                        <el-checkbox :label="index"></el-checkbox>
                      </div>
                    </div>
                  </el-col>
                </el-checkbox-group>
              </el-row>
            </template>
            <template v-else>
              <el-row :gutter="16">
                <el-radio-group style="display: block;" @change="radioChange" v-model="radio">
                  <el-col :span="number" v-for="(item, index) in dataList" :key="index">
                    <div @click.stop="handleBg(index)" :class="active && msg === index ? 'bgColor' : ''" class="cide">
                      <div class="cide_header">
                        <p>{{ item.name }}</p>
                        <el-radio :label="index"></el-radio>
                      </div>
                    </div>
                  </el-col>
                </el-radio-group>
              </el-row>
            </template>
          </el-scrollbar>
        </div>
      </template>
      <template v-else>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </div>
  </div>
</template>
<script>
import "./rolelist.scss";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: Boolean,
      default: false,
    },
    number: {
      type: Number,
      default: 3,
    },
    active: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array,
      default: () => [],
    },
    checkBoxList: {
      type: Array,
      default: () => [],
    },
    radioCheck: {
      type: Number,
      default: 0,
    }
  },
  data () {
    return {
      radio: null,
      checkList: [],
      msg: null,
    };
  },
  watch: {
    checkBoxList: {
      handler (arr) {
        this.checkList = arr;
      },
      deep: true,
    },
    radioCheck: {
      handler (num) {
        this.radio = num;
      },
      deep: true,
    },
  },
  methods: {
    // 选中
    handleBg (item, i) {
      this.msg = i;
      this.$emit("checkClick", item);
    },
    //多选框
    checkChange (arr) {
      this.$emit("checkChange", arr);
    },
    //单选框
    radioChange (val) {
      this.$emit("radioChange", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.paren_content {
  ::v-deep .el-radio__label {
    display: none;
  }
  ::v-deep .el-checkbox__label {
    display: none;
  }
}
</style>