应用场景：列表单元格的值和列表的表头不在一张表里面，也就是动态表头
data () {
return {
// 加载状态
loading: false,
// 显示空数据页面
showNone: true,
// 总条数
total: 0,
// 分类名称
typeName: '',
// 标题
title: '',
// 产品列表
productList: [],
// 表头
colums: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 6,
typeName: '',
values: []
},
// 查询条件
searchItems: [],
}
// 分类id
typeId: null,
// 分类名称列表
typeNames: [],
// 展示分类名称列表
showNames: false,
// 固定查询条件
fixedItems: [
{
fieldId: null,
sequence: 1,
fieldName: '物料图号',
searchable: 1,
comparable: 1,
required: 1,
fieldValue: ''
},
{
fieldId: null,
sequence: 2,
fieldName: '物料名称',
searchable: 1,
comparable: 0,
required: 1,
fieldValue: ''
},
{
fieldId: null,
sequence: 3,
fieldName: '竞品图号',
searchable: 1,
comparable: 0,
required: 1,
fieldValue: ''
}
],
},这段代码是一个 Vue.js 组件中的 data() 方法，用于定义组件的数据属性。以下是每个属性的简要说明：
-
loading: 控制加载状态的布尔值。 -
showNone: 控制是否显示空数据页面的布尔值。 -
total: 总条数，表示数据总数。 -
typeName: 分类名称，用于记录当前的分类。 -
title: 标题，用于记录页面标题。 -
productList: 产品列表，存储从后端获取的产品数据。 -
colums: 表头，存储表格的列信息。 queryParams: 查询参数对象，包含用于向后端发送请求的查询条件，具体包括：
-
pageNum: 当前页码，表示当前页的页数。 -
pageSize: 每页显示的数据条数。 -
typeName: 分类名称的查询条件。 -
values: 存储其他查询条件的数组。
这些数据属性将被用于在组件中存储和管理相关的数据，并通过数据绑定在模板中进行显示和操作。
methods: {
getList () {
this.queryParams.typeName = this.typeName
getProductByParams(this.queryParams).then(res => {
if (res.code === 200) {
this.productList = res.data.page.records
this.productList.forEach(item => {
item.values.forEach((val, index) => {
if (val.fieldValue === null || val.fieldValue === '') {
item.values[index].fieldValue = '/'
}
})
})
this.colums = res.data.fields
this.colums.forEach((item, index) => {
this.product[index.toString()] = ''
})
this.product.values = this.colums
this.total = res.data.page.total
this.title = res.data.typeName + '-'
this.typeName = res.data.typeName
this.typeId = res.data.typeId
this.loading = false
this.showNone = false
} else {
this.$message({
type: 'error',
message: res.msg
})
}
})
},
// 查询分类名称
handleTypeNameQuery (query) {
this.loading = true
getTypeNames(query).then(res => {
this.typeNames = res.data
this.showNames = true
this.loading = false
})
},
// 查询所有分类名称
handleTypeNameQueryAll () {
this.loading = true
getTypeNames('').then(res => {
this.typeNames = res.data
this.showNames = true
this.loading = false
})
},
// 查询
handleQuery () {
this.productList.length = 0
this.queryParams.values.length = 0
for (let i = 0; i < this.searchItems.length; i++) {
const data = {
fieldName: this.searchItems[i].fieldName,
fieldValue: this.searchItems[i].fieldValue
}
if (data.fieldValue !== undefined && data.fieldValue !== null && data.fieldValue !== '') {
this.queryParams.values.push(data)
}
}
if (this.typeName === '' && this.queryParams.values.length === 0) {
this.$message({
message: '请选择分类名称',
type: 'warning'
})
} else {
this.queryParams.pageNum = 1
this.getList()
}
}
}这段代码是一个 Vue.js 组件中的 methods 对象，包含了组件中的方法。以下是每个方法的简要说明：
-
getList(): 获取产品列表的方法。该方法会根据查询参数typeName发起网络请求，获取后端返回的产品数据。如果请求成功，会将返回的产品数据进行处理，并更新组件中的相关属性，如productList、colums、total等。如果请求失败，会显示错误消息。 -
handleQuery(): 处理查询操作的方法。该方法会重置productList和queryParams.values数组，并根据searchItems中的条件项创建查询参数，将非空的条件项添加到queryParams.values数组中。然后检查typeName和queryParams.values是否为空，若为空则显示警告消息，否则将pageNum重置为 1 并调用getList()方法。
这些方法用于处理组件中的逻辑和响应用户的操作，例如获取产品列表、处理查询操作等。它们在组件中通过事件绑定或其他方式触发。
<div>
<el-form ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item v-for="item in searchItems" :key="item.fieldId">
<span style="float: left;width: 80px">{{ item.fieldName }}:</span>
<el-input
v-model="item.fieldValue"
placeholder="请输入"
clearable
@keyup.enter.native="handleQuery"
style="float: left;width: 70%;"
/>
</el-form-item>
<el-form-item>
分类名称: <el-select
style="width: 70%"
v-on:focus="handleTypeNameQueryAll"
@change="resetQuery"
v-model="typeName"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="handleTypeNameQuery"
:loading="loading"
>
<el-option
v-for="item in typeNames"
:key="item.typeId"
:value="item.typeName">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
</el-form-item>
</el-form>上面这个表单主要是查询不同的分类就会展现不同表头的表格，调用的getList函数会获取到该分类下的数据。
<el-table
height="570"
@selection-change="handleSelectionChange"
:data="productList"
style="margin-top: 15px">
<el-table-column type="selection" width="55" align="center"/>
<el-table-column
v-for="(colum,index) in colums"
:key="index"
:prop="`values.${index}.fieldValue`"
:label="colum.fieldName"
min-width="150"/>
<el-table-column
label="操作"
width="180"
fixed="right">
<template slot-scope="scope">
<el-button
type="text"
size="mini"
@click="handleEdit(scope.row)">编辑
</el-button>
<el-button
type="text"
size="mini"
@click="handleDelete(scope.row)">删除
</el-button>
<el-button
type="text"
size="mini"
@click="competitorsCompare(scope.row)">比对
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
v-show="total>0"
:total="total"
:current-page.sync="queryParams.pageNum"
:page-size.sync="queryParams.pageSize"
:page-sizes="[6, 10, 50, 100]"
layout="total, sizes, prev, pager, next, jumper"
style="margin-top: 10px"
>
</el-pagination>这段代码展示当搜索到不同分类渲染不同表头的表格时使用el-table组件如何渲染。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
