自定义列表

 实现ui需要效果如下：

 

 <el-row :gutter="0" class="title-row">
      <el-col v-for="(item, index) in titleList" :key="index" :span="item.col">
        {{ item.name }}
      </el-col>
    </el-row>
    <ul
      v-if="dataList.length"
      class="scroll-bar"
    >
      <li
        v-for="(item, index) in dataList"
        :key="index"
        @click="viewDetails(item)"
      >
        <el-row :gutter="0" class="content-row">
          <el-col v-for="(it, i) in titleList" :key="i" :span="it.col"  class="ellipse" :title="item[it.id]">
            {{ item[it.id]?item[it.id]:'---' }}
          </el-col>
        </el-row>
      </li>
    </ul>

列表头也可以是动态的。列表头数据titleList如下:

[{id: "year", name: "年份"},
{id: "zbmc", name: "指标名称"},
{id: "zbdw", name: "指标单位"},
{id: "ydz", name: "月度值"},
{id: "ydzz", name: "月度增长"},
{id: "ljz", name: "累计值"},
{id: "ljzz", name: "累计增长"}]

列表内数据dataList如下：

 [
        {
          dnjz: null,
          dnxz: null,
          dnxzzz: null,
          ejzb: "战略性新兴产业产值",
          id: 2,
          ljpjz: null,
          ljz: null,
          ljzz: "27.8",
          nf: "2022",
          xh: "2",
          ydhb: null,
          ydtb: null,
          ydz: null,
          ydzz: null,
          year: "202202",
          yf: "2月",
          yjzb: "全市主要指标",
          zbdw: "亿元",
          zbmc: "战略性新兴产业产值",
        },
      ],

需要注意的是我们的头部是动态的，布局使用的是24格，所以我们需要动态计算出列表头的长度，用24除上长度再向下取整，给每个列头加上平均数宽度。

 getList() {
      let params = {
        name: this.currentObj ? this.currentObj.tag : "",
        title: this.popupOption.title,
        year: this.time,
      };
      this.$http
        .get("/yztcloud/scence/eonomyIndicatorTrend/secondList", params)
        .then((res) => {
          this.dataList = (res || {}).data;
          this.titleList = res.header;
          this.col = Math.floor(24 / this.titleList.length);
          this.titleList.forEach((i, v) => {
            i.col = this.col;
          });
          this.titleList[1].col =
            this.col +
            (24 -
              Math.floor(24 / this.titleList.length) * this.titleList.length);//标题列特地加长点宽度
        });
    },