element-ui el-table 展示多列重复数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui el-table 展示多列重复数据相关的知识,希望对你有一定的参考价值。
参考技术A 配送信息编辑
123
3 ? 3 : tableData.length">
tableData[scope.$index * 3 + index].name
tableData[scope.$index * 3 + index].point
123
export default
data()
return
tableData: [ name: "张三", point: "60" ],
tableList: [],
,
created()
for (let i = 0; i < 30; i++)
this.tableData.push(
name: "张三" + i,
point: "60" + i,
)
if (this.tableData.length > 0)
let num = Math.ceil(this.tableData.length / 3)
for (let j = 0; j < num; j++)
this.tableList.push()
,
vue element-ui el-form el-table 表单查询表格展示(可滚动加载)
vue 滚动加载
-
vue element-ui
-
功能:
-
el-form
-
el-table 默认展示所有数据,点击查询时,展示查询到的数据
<!-- 1.查询表单 --> <el-form> <el-row> <el-col :span=\'12\'> <el-form-item label="名称"> <el-input v-model="queryParams.pcustName" clearable placeholder="请输入名称" style="width:200px" > <!-- clearable 输入框可清除属性 --> </el-input> </el-form-item> </el-col> <el-col :span=\'12\'> <el-form-item label="客户类别"> <el-select v-model="queryParams.custClass" clearable > <el-option v-for="item in typeOption" :key= "item.value" :label="item.label" :value ="item.value" > </el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row :span="8"> <el-button type="primary" @click="doQuery"> 查询</el-button> </el-row> </el-form>
-
<!-- 2.列表展示(可勾选) -->
<el-table
v-scroll="getList"
:data="tableData"
@selection-change="handleSelectChange"
v-loading="loading"
height="600"
style="overflow-y:auto"
>
<!-- selection-change 当列表项前面的多选框勾选状态发生变化时,触发的事件 -->
<el-table-column
:selectable="checkSelectable"
v-for="column in tableColums"
:key="column.prop"
:prop="column.prop"
:label="column.label"
:type="column.type"
>
<!-- selectable 多选框是否禁用 -->
</el-table-column>
</el-table>
data(){
return {
loading:true,//是否显示加载圈
busy:true,//是否可以请求
queryParams:{
pcustName:\'\',
custClass:\'\'
},
typeOption:[
{lable:\'类别1\',value:\'0\'},
{lable:\'类别2\',value:\'1\'},
{lable:\'类别3\',value:\'2\'},
],
tableData:[],
loading:true,
multipleSelection:[]
}
},
async getList(msg){
this.loading = true
if(msg=="query"||this.isApply){//查询列表的时候
this.busy = true
this.pageData.currentPage=1
}
if(this.busy){//是否允许再加载数据的变量,初始化为true,所以此函数至少调用一次
let params = {
params1:"",
params2:"",
pageNo:this.pageData.currentPage++,
pageSize:this.pageData.rows
}
let res = await toGetList(params)
if(res.code==\'200\'){
let list = res.data
if(msg=="query"){
this.tableData = list
}else{
this.tableData = this.tableData.concat(list)
}
if(list.length==0||list.length<this.pageData.rows){
this.busy = false
}
this.isApply = false
}
this.loading=true
}
}
doQuery(){
this.getList(\'query\')
},
//批量操作时,(列表项勾选一个或多个时)
handleSelectChange(val){
this.multipleSelection = []
val.forEach(item => {
this.multipleSelection.push(item.pcustNo)
});
},
// 选择框禁用的条件 true 可选 false 不可选
checkSelectable(row){
return row.status==1
},
以上是关于element-ui el-table 展示多列重复数据的主要内容,如果未能解决你的问题,请参考以下文章