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

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

avue-crud初始化下拉列表,以及复选框,默认选中_第1张图片
在这里插入图片描述

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

2.运行结果
avue-crud初始化下拉列表,以及复选框,默认选中_第2张图片
3.后台请求初始化下拉列表

avue-crud初始化下拉列表,以及复选框,默认选中_第3张图片
4.运行结果

avue-crud初始化下拉列表,以及复选框,默认选中_第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详细介绍

你可能感兴趣的:(前端,vue)