电商系统 常用代码 AVUE

原文：
https://gitee.com/smallweigit/avue-doc/blob/master/api.md
https://www.bookstack.cn/read/avue-1.x/c2eb9c4cc35e2805.md

是否显示

            {
              label: "是否显示",
              prop: "isShow",
              rules: [{
                required: false,
                message: "请输入是否显示（0：未显示，1：显示）",
                trigger: "blur"
              }],
              type: "select",
              dicUrl: "/api/blade-system/dict/dictionary?code=yes_no",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              value: 0,
              width: "70",
            },

品牌和产品联动

{
              label: "品牌",
              prop: "brandId",
              rules: [{
                required: false,
                message: "请输入品牌",
                trigger: "blur"
              }],
              hide: true,// 在列上隐藏
              type: "select",
              dicUrl: "/api/blade-pms/brand/select",
              props: {
                label: "name",
                value: "id"
              },
              cascaderItem: ['productId'],
            },
            {
              label: "产品",
              prop: "productId",
              rules: [{
                type: "number",
                required: true,
                message: "请输入品牌id",
                trigger: "blur"
              }],
              type: "select",
              dicUrl: "/api/blade-pms/product/select?brandId={{key}}",
              props: {
                label: "name",
                value: "id"
              },
              filterable: true,
              dataType: "number",
              hide: true,
            },

提示消息

this.$message.warning("请选择素材版本！");

分页和搜索条件

:page.sync="childPage"
:search.sync="childQuery"

写死字典项，不用再从数据字典中读取

比如仅仅只有一个地方用到的状态

            {
              label: "多SKU",
              prop: "multipleSku",
              rules: [{
                type: "number",
                required: false,
                message: "请输入是否有多SKU",
                trigger: "blur"
              }],
              type: "select",
              // dicUrl: "/api/blade-system/dict/dictionary?code=pms_multiple_sku",
              // props: {
              //   label: "dictValue",
              //   value: "dictKey"
              // },
              dicData: [
                {
                  label: "没有",
                  value: 0
                },
                {
                  label: "有",
                  value: 1
                }
              ],
              value: 0,
            },

设置列的宽度

width: "150",

列的内容 超出隐藏

overHidden: true,

列为字典项 动态填充数据

方式1

  let column = this.multipleMaterialCopyOption.column.find(item => item.prop == "typeId");
  if (this.validatenull(column)) {
	window.console.log("未找到列：typeId");
	return;
  } else {
	column.dicData = res.data.data;
	this.multipleMaterialCopyBoxVisible = true;// 显示弹框
  }

方式2

const column = this.findObject(this.option.column, "categoryId");
column.dicData = res.data.data;

方式3
https://avuejs.com/doc/crud/crud-dic

dicFlag: true,// 重新拉取字典

CRUD表格 操作栏 宽度调整

menuWidth:380,

备注的样式

span: 24,
minRows: 6,
type: "textarea",

只能通过点击按钮来关闭对话框（是否可以通过点击modal关闭Dialog）

dialogClickModal: false,

列隐藏（在form表单中隐藏）

display: false,

列隐藏（在table中隐藏）

hide: true,

列格式化

	{
	  label: "在售店铺",
	  prop: "saleStoreNames",
	  rules: [{
		required: true,
		message: "请输入在售店铺",
		trigger: "blur"
	  }],
	  display: false,
	  search: true,
	  formatter(row, value, label, column) {
		return value.replace(/,/g,'\<br\>');
	  },
	},

deepClone对象深拷贝

var obj2 = this.deepClone(obj1);

在Form表单上独占一行

span: 24

判断是否为空

console.log(this.validatenull(obj1))

对象深拷贝

var obj1 = {
    name:'张三'
  }
var obj2 = this.deepClone(obj1);

下拉项为字典

https://www.cnblogs.com/guxingy/p/13890759.html

{
  label: "类型",
  prop: "type",
  rules: [{
	required: true,
	message: "请输入类型",
	trigger: "blur"
  }],
  type: "select",
  dicUrl: "/api/blade-system/dict/dictionary?code=pms_store_type",
  props: {
	label: "dictValue",
	value: "dictKey"
  },
},