查询信息记录页面

接上篇，前端兄弟有点忙，终于要在前端代码插一杠子了，哈哈
需求仅仅用于展示，不做发送信息功能。思路：循环card组件，展示信息记录list。
第一步，官网拷贝基础应用代码
第二步，链接后端接口，获取信息list

  getConvs() {
        this.dialogVisible = true;
        const param = {
          from: 12345,
          to: 54321,
        };
        getConv(param)
          .then((res) => {
            Log.debug(res);
            if (res.data.code === 200) {
              if (res.data.obj.conv === undefined) {
                this.convs = [{ context: '无对话信息' }];
              } else {
                this.convs = res.data.obj.conv;
                res.data.obj.conv.forEach((item) => {
                  this.convItem = item;
                  this.convItem.time = strftime('%Y-%m-%d %H:%M', new Date(item.timestamp));
                  const s = JSON.parse(item.data);
                  Log.debug(s);
                  // eslint-disable-next-line
                  this.convItem.fromName = s._lcattrs.username;
                  // eslint-disable-next-line
                  if (s._lctype === -1) {
                    // eslint-disable-next-line
                    this.convItem.context = s._lctext;
                    // eslint-disable-next-line
                  } else if (s._lctype === -2) {
                    // eslint-disable-next-line
                    this.convItem.image = JSON.parse(item.data)._lcfile.url;
                  }
                });
              }
            }
          });
      },

第三步，将数据装入变量，页面显示

    <!-- 聊天记录 -->
    <el-dialog title="聊天记录"   :visible.sync="dialogVisible">
     <div name= "app">
      <el-row v-for="(convItem,index) in convs" :key="index">
        <div>
          <div class = 'div-left' ><h5> {{ convItem.fromName }} </h5></div>   
          <div >{{ convItem.time }}</div>
        </div>
        <el-card shadow="always">
          <div> 
            <span>{{ convItem.context }}</span>
            <img :src="convItem.image" >
          </div>
        </el-card>
      </el-row>
    </div>
    <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>

补充：定义变量

data() {
      return {
         convs: [],
        dialogVisible: false,
        convItem: {},
        fromId: '',
        toId: '',
   }
}

效果：

补充： // eslint-disable-next-line 含义
取数据时，发现下划线不能通过编译，三方返回的带有下划线，发现是eslint规则不通过，简单粗暴的方法，修改配置文件，去掉应用eslint，果真好使（开始让我抓狂的空格报错都没有了）。

但是作为java开发，修改前端代码实属不敢动配置文件啊，咱也不敢说呀，咱也不敢问啊，默默的查改动小的方法： 参考博客

博文介绍了js中配置规则：
// eslint-disable-next-line 这一行的作用可以使下一行不进行校验，也就可以使用下划线了。
现在再来看，其实可以用
/*eslint-disable */
…
/*eslint-enable */省的每行都添加了。

最后补充： eslint配置参数介绍