你也许不知道的avue(1)——自定义select框字典表数据

简介： Aue是一套基于element-ui的组件库，官网地址：www.avuejs.com/ 。它提供了更多的组件实现效果。

业务主要场景：系统业务功能简单基本都是增删改查。由于其做了很多封装，有时候面对复杂的场景的时候需要费一些心思。本文将讲述如何自定义字典表数据。

你可能遇到的大多数select框效果

{
            label: "频度",
            prop: "frequency",
            className: "formLabelClass",
            overHidden: true,
            search: true,
            type: "select",
            dicData: [
              {
                value: "选项1",
                label: "黄金糕"
              },
              {
                value: "选项2",
                label: "双皮奶"
              },
              {
                value: "选项3",
                label: "蚵仔煎"
              },
              {
                value: "选项4",
                label: "龙须面"
              },
              {
                value: "选项5",
                label: "北京烤鸭"
              }
            ],
            props: {
              label: "label",
              value: "value"
            },
}         

但是，有时候要展示的效果：

{
            label: "频度",
            prop: "frequency",
            className: "formLabelClass",
            overHidden: true,
            search: true,
            type: "select",
            dicData: [
              {
                value: "选项1",
                label: "黄金糕"
              },
              {
                value: "选项2",
                label: "双皮奶"
              },
              {
                value: "选项3",
                label: "蚵仔煎"
              },
              {
                value: "选项4",
                label: "龙须面"
              },
              {
                value: "选项5",
                label: "北京烤鸭"
              }
            ],
            dicFormatter: res => {
              let arr = [];
              res.forEach(item => {
                arr.push({ label: `[${item.id}]${item.label}`, value: item.id });
              });
              return arr;
            },
            props: {
              label: "label",
              value: "value"
            },
}