DictSelectUtil.js 列表字典函数 问题及使用

 

目录

1. 问题

2. 引入依赖方法

3.  在created()初始化方法执行字典配置方法 (特别重要）

4. 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法)

5. 实现字段的customRender方法

6. 解决方法

---

需要在表格(Table) 中 通过数据库表的直接填充或渲染一列

1. 问题

   customRender中用this访问不到data中定义的数组

 

2. 引入依赖方法

import{initDictOptions, filterDictText}from'@/components/dict/JDictSelectUtil'

3.  在created()初始化方法执行字典配置方法 (特别重要）

如果不执行这个步骤，将出现我的问题， 在 customRender 中 取不到 this

使用此步骤，可正常使用官网例子，如果不使用此步骤，可选择 使用第六步 的解决方法。

官网示例：

4. 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法)

initDictConfig() {
              //初始化字典 - 社区
              initDictOptions('数据库表名, 字段1, 字段2, 3可选择性的加条件（非必要）').then((res)=>{
                if(res.success){
                  communityDictOptions = res.result;
                }
              });

            }

5. 实现字段的customRender方法

{
                    title: '所属社区',
                    align: "center",
                    dataIndex: 'communityId',
                    customRender: (text, record, index) => {
                      //字典值替换通用方法
                      return filterDictText(communityDictOptions, text);
                    }
                  },

6. 解决方法

将变量定义在script中

参考文章；https://blog.csdn.net/wyljz/article/details/106526831