前端级联选择器的实现

青旅半醒 2024-04-01 15:24 101阅读 0赞

#### 使用场景 ####

下拉选择器存在多级的场合，并且一级下面必须有二级。

#### 前端代码 ####

<el-form-item label="费目名称" prop="expenseId">
                  <el-cascader
                    size="small"
                    clearable
                    filterable
                    placeholder="请选择费目名称"
                    v-model="formOther.expenseId"
                    :options="chargeOptions"
                    :props="cascaderProps"
                    style="width: 100%"
                  ></el-cascader>
                </el-form-item>

//费目明细列表
          chargeOptions: [],
         //数据匹配格式
          cascaderProps: {
            value: "id",                 //匹配响应数据中的id
            label: "expenseName",        //匹配响应数据中的name
            children: "children"         //匹配响应数据中的children
          },

//将后端传来的数据设置到费目明细信息列表中
        getCharge() {
          getListBmschargetype().then(response => {
            this.chargeOptions = response.rows;
          })
        },

#### 后端返回的实体类 ####

public class BmsChargeTypeListDto {
    
        /**  费用ID  1 */
        private Long id;
    
        /** 费目名称 */
        private String expenseName;
    
        public Long getId() {
            return id;
        }
    
        public void setId(Long id) {
            this.id = id;
        }
    
        public String getExpenseName() {
            return expenseName;
        }
    
        public void setExpenseName(String expenseName) {
            this.expenseName = expenseName;
        }
        private List<BmsChargeTypeDto> children;
    
        public List<BmsChargeTypeDto> getChildren() {
            return children;
        }
    
        public void setChildren(List<BmsChargeTypeDto> children) {
            this.children = children;
        }
    }

#### 总结 ####

此类型的级联选择器是将后端返回的一级及二级数据按照数据匹配格式进行显示，并不是采用动态显示的方式