饿了么+vue

01 cell-list的基本使用

001基本样式

.info-wrap { margin-top: 24px; margin-bottom: 33px; border-top: 1px solid #eeeeee; border-left: 1px solid #eeeeee; .info-item { font-size: 16px; font-family: PingFang SC; font-weight: 400; line-height: 26px; color: #333333; display: flex; align-items: center; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; background: #f3f7fd; .info-title { width: 176px; height: 50px; background: #f3f7fd; padding-left: 17px; display: flex; align-items: center; } .info-content { flex: 1; padding-left: 17px; background: #fff; p { color: #666666; } } } } ### 002js

data() {
    this.aesDt=aesDt;
    return {
      form: {
        enterName: '', // 企业名字
        industryType: '', // 行业类型
        enterId: '', // 企业统一社会信用代码
        area: '', // 区域
        level: '', // 企业层级
        groupName: '', // 专项小组
        enterpriseAbstract: '', // 企业简介
        address: '', // 地址
        streetName: '', // 街道
        leadDept: '', // 牵头单位
        xlEnterpriseListDto: [ // 联系人
          {
            contactId: '', // 联系人主键
            contactName: '', // 联系人姓名
            contactMobile: '', // 联系人电话
          }
        ],
      },
      contact1:[]
    };
  },

// 通过Id获取数据
getDetails(enterId) {
      serviceApi
        .getEnterById({ enterId })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            // 解密联系人手机号
            res.result.contact.forEach((item) => {
              item.contactMobile && (item.contactMobile = aesDt(item.contactMobile));
            });
            this.form = res.result;cell-list标签里面只能:content='item'填写一个值，所以要把用户名和手机号码拼接字符串然后显示到content里面
            // 因为
            this.contact1  = res.result.contact.map(item => {
              return item.contactName+','+parseInt(item.contactMobile,16)
            })
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },