Vue复选框、下拉框使用案例，复选框选项元素（el-checkbox）换行竖向显示

一、复选框

1、的选项元素默认是行横向显示

		  

            test1
            test2
            test3
            test4
            test5
          

2、如果需要调整为换行竖向显示，如下：

          
            test1
            test2
            test3
            test4
            test5
          

3、复选框使用案例

【1】初始化

//数据准备
const initPermissionList = ref([
  {code: "0", label: "a"},
  {code: "1", label: "b"},
  {code: "2", label: "c"},
  {code: "3", label: "d"},
  {code: "4", label: "e"}
]);


//循环展示
          
            
              {{item.label}}
            
          


//初始化选中
function showPermissionDialog(row?: any) {
  if(row == null){
    return;
  }
  additionalPermissionsParams.shopId = row.shopId;
  if (row.additionalPermissionList != null) {
    additionalPermissionsParams.permissionList = row.additionalPermissionList;
  } else {
    additionalPermissionsParams.permissionList = [];
  }
  additionalPermissionsVisible.value = true;
}

【2】勾选事件

//勾选事件
const permissionChange = (selectedTypes: []) => {
  // 在这里可以使用 selectedTypes 来获取选中的集合
  additionalPermissionsParams.permissionList = selectedTypes;
};

【3】整个复选框一系列函数案例

//附加权限 start
const initPermissionList = ref([
  {code: "0", label: "a"},
  {code: "1", label: "b"},
  {code: "2", label: "c"},
  {code: "3", label: "d"},
  {code: "4", label: "e"}
]);

const additionalPermissionsParams = reactive({
  title: "弹框标题",
  shopId: "",
  permissionList: []
});
const additionalPermissionsVisible = ref(false);

//显示弹框
function showPermissionDialog(row?: any) {
  if(row == null){
    return;
  }
  additionalPermissionsParams.shopId = row.shopId;
  if (row.additionalPermissionList != null) {
    additionalPermissionsParams.permissionList = row.additionalPermissionList;
  } else {
    additionalPermissionsParams.permissionList = [];
  }
  additionalPermissionsVisible.value = true;
}

//取消显示弹框
const handelCancel = async () => {
  additionalPermissionsParams.shopId = "";
  additionalPermissionsParams.permissionList = [];
  additionalPermissionsVisible.value = false;
};

//勾选事件
const permissionChange = (selectedTypes: []) => {
  // 在这里可以使用 selectedTypes 来获取选中的集合
  additionalPermissionsParams.permissionList = selectedTypes;
};

//确认
const confirmPermission = async () => {
  shopApi.setAdditionalPermission(additionalPermissionsParams).then((data: any) => {
    ElMessage.success("操作成功!");
  }).catch((data: any) => {
    ElMessage.success("操作失败!");
  })
};
//附加权限 end

二、下拉框

1、下拉框初始化案例代码

//下拉选项元素
const initPermissionListSearcSelect = ref([
  {code: "", label: "全部"},
  {code: "1", label: "扫码点餐"},
  {code: "2", label: "预订座位"},
  {code: "none", label: "无"}
]);


//循环展示