在Vue&Element前端项目中，对于字典列表的显示处理

在很多项目开发中，我们为了使用方便，一般都会封装一些自定义组件来简化界面的显示处理，例如参照字典的下拉列表显示，是我们项目中经常用到的功能之一，本篇随笔介绍在Vue&Element前端项目中如何使用自定义封装的字典显示处理。

1、字典内容管理

我们在系统中，往往维护着一些系统常用到的字典信息，在我各个框架中都有一个通用的字典管理模块，对于Vue&Element前端项目，也是一样，我们也需要对它进行管理，方便前端使用。本篇随笔介绍的内容适用于ABP开发框架的Vue&Element前端，微信框架和Bootstrap框架中的Vue&Element前端内容。

字典项目一般包括项目大类，字典项的管理，字典项包括显示内容和值，两者可以不一样，也可以一样，如下所示

 或者如下所示

 字典大类和字典项目的表设计图如下所示。

 字典大类由PID构建无穷级的树结构，而字典项目则通过Name和Value来记录显示内容和值内容。

2、后端WebAPI的数据提供

在建立相关的数据表存储数据外，我们后端也需要提供相应的Web API来给各前端提供数据处理，对于显示处理，我们定义了一个适合于Select组件和Tree组件的数据结构，主要就是提供id和label的属性，如下代码所示。

   /// <summary>
    /// 通用树节点的定义
    /// </summary>
    [Serializable]
    public class TreeNodeItem
    {
        /// <summary>
        /// 默认构造函数
        /// </summary>
        public TreeNodeItem()
        {
        }

        /// <summary>
        /// 构造函数
        /// </summary>
        public TreeNodeItem(CListItem item) :this()
        {
            this.Label = item.Text;
            this.Id = item.Value;
        }

        /// <summary>
        /// 参数化构造CListItem对象
        /// </summary>
        /// <param name="label">显示的内容</param>
        /// <param name="id">实际的值内容</param>
        /// <param name="key">存储额外的键</param>
        public TreeNodeItem(string id, string label, string key = null) : this()
        {
            this.Id = id;
            this.Label = label;
            this.Key = key;
        }

        /// <summary>
        /// 参数化构造CListItem对象
        /// </summary>
        /// <param name="label">显示的内容</param>
        /// <param name="id">实际的值内容</param>
        /// <param name="key">存储额外的键</param>
        public TreeNodeItem(int id, string label, string key = null) : this()
        {
            this.Id = id.ToString();
            this.Label = label;
            this.Key = key;
        }

        /// <summary>
        /// 参数化构造CListItem对象
        /// </summary>
        /// <param name="text">显示的内容</param>
        public TreeNodeItem(string text) : this()
        {
            this.Id = text;
            this.Label = text;
        }

        /// <summary>
        /// 实际值内容
        /// </summary>
        public string Id { get; set; }

        /// <summary>
        /// 显示内容
        /// </summary>
        public string Label { get; set; }

        /// <summary>
        /// 用于存储额外的键
        /// </summary>
        public string Key { get; set; }

        /// <summary>
        /// 子节点集合
        /// </summary>
        [JsonProperty(NullValueHandling = NullValueHandling.Ignore, DefaultValueHandling = DefaultValueHandling.Ignore)]
        public List<TreeNodeItem> children { get; set; }

        /// <summary>
        /// 返回显示的内容
        /// </summary>
        /// <returns></returns>
        public override string ToString()
        {
            return Label.ToString();
        }
    }