xyj-element v0.1.2

xyj-check

父组件中使用

 <xyj-check :config="config" :list="list" :echo-list="echoList" @getList="fn"></xyj-check>

:config 配置选择框 已下均为默认值可以自行修改

   config: {
        is:false,//是否使用默认配置 true使用后 下面配置的都不生效 也可以不配置
        isAll: true,//开启全选
        max: 100,//最多选几个
        min: 0,//最少选几个
        size: 'small',//样式大小 medium / small / mini
        type: 'button',//样式 button border
        textColor: '#fff',//type=button 才生效 字体颜色
        fill: '#123',//type=button 才生效 背景颜色
        isGroup:false//根据后端需要什么数据格式可以设置 false得到[1,2,3] true得到[{name:'长沙',id:1},{name:'武汉',id:2}]
      }

:list 可选择的选项

业务场景1:固定选项 写死参数

  list:[
        {
          name: '长沙',
          id: 1,
          disabled: true //true禁止选择长沙
        },
        {
          name: '武汉',
          id: 2
        },
        {
          name: '泉州',
          id: 3
        }
      ],

业务场景2:不固定选项 从后端api获取

1.假设后端返回的JSON为
  this.cityList=[
        {
          label: '长沙',
          cityId: 1,
        },
        {
          label: '武汉',
          cityId: 2
        },
        {
          label: '泉州',
          cityId: 3
        }
      ]
      //数据处理
        this.list = this.cityList.map(item => {
          return {
              name:item.label,
              id:item.cityId
          };
        });

@getList="fn" 子组件会告诉父组件勾选了哪些

1.比如我们勾选了 长沙
methods:{
    //获取子组件传递的勾选值
    fn(res){
        console.log(res)//[1]||[{name:'长沙',id:1}]
        this.cityList=res//赋值
    }
    //保存按钮
    save(){
        const data={
           cityList:this.cityList 
        }
        ...发起请求给后端传参
    }
}

:echoList 回显数据

业务场景:请求后端api保存后 一般查看详情进行之前保存的修改 需要回显告诉我们之前选择了哪几个

1.假设后端返回[{label:'长沙',cityId:1}]这种格式
this.config.isGroup=true//需要设置为true 才能正常回显

2.假设后端返回[1,2,3]这种格式
this.config.isGroup=false//需要设置为false 才能正常回显

3.假设我们之前选的是长沙,后端详情api返回的JSON为
  this.cityList=[
        {
          label: '长沙',
          cityId: 1,
          checkd:true
        },
        {
          label: '武汉',
          cityId: 2,
          checkd:false
        },
        {
          label: '泉州',
          cityId: 3,
          checkd:false
        }
      ]
      
    //1.isGroup=false数据处理
    this.echoList=[]
    this.echoList = this.cityList.map(item => {
         if(item.checkd){
             this.echoList.push(item.cityId)
         }
    });
    console.log(this.echoList)//[1] 成功回显
    
    //2.isGroup=true数据处理
    this.echoList=[]
    this.echoList = this.cityList.map(item => {
         if(item.checkd){
             this.echoList.push({name:item.label,id:item.cityId})
         }
    });
    console.log(this.echoList)//[{name:"长沙",id:1}] 成功回显