vue 동적 표 제출 매개 변수 동적 생성 컨트롤 작업 실현
<el-form
:model="formData"
style="padding: 0 5px;">
<div v-if="tableshow">
<div v-for="(item,i) in control" :key="i" style="padding-left:10px; float:left" >
<el-form-item
v-if="item.type=='input'"
:key="item.name"
:prop="item.name"
label-width="100px">
<label slot="label">{{ item.cnname }}:</label>
<el-input v-model="item.value" size="mini" style="width: 100px; padding-right: 5px;"/>
</el-form-item>
<el-form-item
v-if="item.type=='time'"
:key="item.name"
:prop="item.name"
label-width="100px">
<label slot="label">{{ item.cnname }}:</label>
<el-date-picker
v-model="item.value"
value-format="yyyy-MM-dd HH:mm:ss"
type="date"
placeholder=" "/>
</el-form-item>
</div>
<div style="padding-left:10px; float:left">
<el-form-item prop="name" style="width: 20px; margin-bottom: 0px;">
<el-button class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="cmdsearch">
{{ $t('table.search') }}
</el-button>
</el-form-item>
</div>
</div>
</el-form>
데이터 형식은 다음과 같습니다.
control: [{
name: 'input1',
cnname: ' 1',
type: 'input',
value: ' '
}, {
name: 'time1',
cnname: ' ',
type: 'time',
value: null
}]
모든 컨트롤의 변화를 감청해야 한다
computed: {
//
formData: function() {
var formData = {}
this.control.forEach((item) => {
formData[item.name] = item.value
})
return formData
}
}
동적 테이블은 다음과 같습니다.
<el-table
v-if="tableshow"
id="exportTab"
ref="multipleTable"
:data="tables"
border="true"
tooltip-effect="dark"
style="width: 100%;"
@selection-change="selectArInfo">
<el-table-column fixed="left" label=" " width="62px" type="index"/>
<template v-for="(col) in tableData">
<el-table-column
:show-overflow-tooltip="true"
:formatter="fmtLength"
:prop="col.dataItem"
:label="col.dataName"
:key="col.dataItem"
resizable="true"
width="120px"/>
</template>
</el-table>
두 개의 수조가 필요합니다. 하나는 표 열 이름을 저장하고, 하나는 표 데이터를 저장합니다.
tables: [],
tableData: [dataItem: xxx,
dataName: xxx], //
보충 지식: vuetable 표의 사용(동적 데이터 전시)첫 번째 방식
<el-table :data="tableDataalllist" border style="width: 100%" @sort-change="totalusercount">
<el-table-column :label="head" :prop="head" v-for="(head, index) in header" :key="head" :sortable=" ">
<template slot-scope="scope">
{{tableDataalllist[scope.$index][index]}} // scope.$index; scope.row
<template>
<el-table-column>
<el-table>
<script>
export default{
data(){
return{
//
tableDataalllist:[{
1,' ','23'
},{
2,' ','15'
},{
3,' ','18'
}],
header:['id','name','age']
}
},
methods:{
// obj
totalusercount(obj){
console.log(obj.prop) //
console.log(obj.order) //
}
}
}
</script>
idname
age
일
장 삼
23
이
이 사
십오
삼
왕 오
십팔
두 번째 방식(동적 열 추가)
<el-table :data="gameareatable" v-loading="cardBuyConsumeDataLoading" v-if="gameareatable.length> 0">
<el-table-column align="center" v-for="(item,index) in activePlayerDataPropLabelArray" :prop="item.prop" :label="item.label"
:key="item.prop">
<template slot-scope="scope">
{{scope.row[item.prop]?scope.row[item.prop]:' '}}
</template>
</el-table-column>
</el-table>
export default {
data(){
return{
// activePlayerDataPropLabelArray label label th ,prop ' ' date ,' ' prop 12 ,' ' prop 15 ,
activePlayerDataPropLabelArray:[{
label:' ',
prop:'date'
},{
label:" ",
prop:"12"
},{
label:' ',
prop:'15'
}],
gameareatable:[{
date:"2018-09-10",
12:' k',
15:' '
},{
date:"2018-08-01",
12:' ',
15:' '
},{
date:"2018-08-02",
12:' ',
15:' '
}]
}
}
}
날짜지주
마작
2018-09-10
늙다
만 원
2018-08-01
폭탄
한 가닥
2018-08-02
쌍
만 원
상기 vue는 동적 표 제출 매개 변수 동적 생성 컨트롤을 실현하는 작업은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.