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="' 第' + (index + 1) + '个grid'" v-for="(gridItem,index) in optionModel.grid" :key="gridItem.id">
<!-- 循环显示每个grid下的y轴 -->
<el-collapse-item :title="' 第' + (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)
-