vue 循环显示数据场景

vue 循环显示数据

el-table 中

<template>
	<el-table :data="goodsList">
    	<el-table-column prop="goodsName" label="商品名称"></el-table-column>
    	<!-- ...... -->
    </el-table>
</template>
<script>
    const goodsList = ref([]);
    // 方法获取多个对象信息放进 goodsList 中
</script>

• :data：接收了传来的多个对象数组
• prop：根据 goods 对象里的属性填写值
• label：为某一列头名，下面循环显示对象信息

el-form 里的 el-select 下拉框中

<template>
	<el-form :model="queryForms" label-width="120px">
        <el-form-item label="商品父编码：">
            <el-select v-model="queryForms.goodsPcode" placeholder="请选择商品父编码" clearable
                       @clear="codeEmpty"
                       @change="changePcode(queryForms.goodsPcode)"
                       class="query-form-item-style">
                <el-option
                           v-for="option in categoryList"
                           :key="option.value"
                           :label="option.label"
                           :value="option.value"
                           ></el-option>
            </el-select>
        </el-form-item>
<!-- ...... -->
</template>

<script>
    const queryForms = reactive({// 查询操作
      goodsPcode: '',
      // 
    })
</script>

• v-model：存储选择的值，双向响应数据
• placeholder：下拉框默认显示值
• clearable：下拉框选中后右侧有个清空下拉框选择的叉号
• @clear：点击 clearable 清空后进行的操作
• @change：当下拉框点击选择做了改变后执行的方法事件
• class：下拉框样式
• v-for：" 单条数据 in 存储多条的数组 " 循环取单条数据加以显示
• :key：键，一般用不到就和 value 同值了
• :label：显示的值，在选择后页面上看到的
• :value：内部存储的值，在选择后传递给 v-model 的值

el-collapse 折叠多级关系不同 list 下拉显示

• 这里以折线图为例：多个 grid，每个 grid 下一个 x 轴、多个 y轴，每个 y 轴对应一个 series（都是存在 list 中）

<el-collapse-item title="grid配置">
    <!--  循环显示多个grid  -->
    <el-collapse-item :title="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第' + (index + 1) + '个grid'" v-for="(gridItem,index) in optionModel.grid" :key="gridItem.id">
        <!--  循环显示每个grid下的y轴  -->
        <el-collapse-item :title="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第' + (yAxisIndex + 1) + '个y轴配置'" v-for="(yAxisItem,yAxisIndex) in filterYAxisByGridIndex(gridItem.id)" :key="yAxisIndex">
            <!--  循环显示y轴的series  -->
            <template v-for="(seriesItem, seriesIndex) in filterSeriesByYAxisIndex(yAxisItem.id)" :key="seriesIndex">

<!--  ......  -->

• 循环筛选显示数据示例：

  // 根据grid过滤出所属x轴
  filterXAxisByGridIndex(gridId){
    return this.optionModel.xAxisStyle.filter((xAxisItem) =>
        xAxisItem.gridId === gridId
    )
  },
  

  • 删除也可以用过滤的方法，也可以用 index 位置的方法：

    // 直接过滤出不需要的一个
    newYAxis = newYAxis.filter(item => item.id !== yAxisId && item.gridId === gridId)
    
    // 找到不需要的，再删除
    const yAxisIndex = this.optionModel.yAxis.findIndex(item => item.id === yAxisId)
            this.optionModel.yAxis.splice(yAxisIndex, 1)