avue-crud初始化下拉列表,以及复选框,默认选中

1.后台请求初始化复选框

在这里插入图片描述
在这里插入图片描述

常用属性
type:input的话是输入框,select是下拉选择框,checkbox是复选框
label:属性名对应的名称,也是前端列表所显示的列名
prop:属性名
dicUrl:对应请求后台路径
dicMethod:请求方法类型
props:形成下拉框的数据,显示的名称是label,选中的值是value,可以分别映射后端返回的值
rules:一些验证规则

2.运行结果
在这里插入图片描述
3.后台请求初始化下拉列表

在这里插入图片描述
4.运行结果

在这里插入图片描述
在这里插入图片描述

5.默认初始化下拉列表,初始化复选框

直接调用beforeOpen方法,通过this.$set(this.form);来初始化表单
在这里插入图片描述

<div class="app-container">
    <avue-crud
      ref="crud"
      :page="page"
      :data="tableData"
      :permission="permissionList"
      :table-loading="tableLoading"
      :option="tableOption"
      :before-open="beforeOpen"
      v-model="form"
      @on-load="getPage"
      @refresh-change="refreshChange"
      @row-update="handleUpdate"
      @row-save="handleSave"
      @row-del="handleDel"
      @sort-change="sortChange"
      @search-change="searchChange"
      @selection-change="selectionChange"
    >
    </avue-crud>
  </div>
data() {
    return {
      checkPermi: checkPermi,
      form: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
        ascs: [], //升序字段
        descs: "create_time", //降序字段
      },
      paramsSearch: {},
      tableLoading: false,
      tableOption: tableOption,
      dialogAppraises: false,
      optionAppraises: {
        props: {
          avatar: "nickName",
          author: "headimgUrl",
          body: "content",
        },
      },
      selectionData: "",
      pointsConfig: null,
    };
  },
beforeOpen(done, type) {
      if (type == "add") {
        done();
      } else if (type == "edit") {
        this.tableLoading = true;
        //根据id查询
        getObj(this.form.id).then((response) => {
          //初始化复选框
          this.form.ensureIds=response.data.ensureIds;
          //初始化下拉列表
          this.form.shipId=response.data.shipId;
          //也可以不发送后端请求,直接赋值表单即可,this.form是page列表的数据
          this.$set(this.form);
          this.tableLoading = false;
          done();
        });
      }
    },

关于this.$set详细介绍

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值