溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關利用vue如何實現一個動態表格提交參數的功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
動態控件代碼如下
<el-form
:model="formData"
>
<div v-if="tableshow">
<div v-for="(item,i) in control" :key="i" >
<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" />
</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 >
<el-form-item prop="name" >
<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>data格式如下
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"
@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], //保存表格列名
補充知識：vue table表格的使用(動態數據展示)
第一種方式
<el-table :data="tableDataalllist" border @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>| id | name | age |
|---|---|---|
| 1 | 張三 | 23 |
| 2 | 李四 | 15 |
| 3 | 王五 | 18 |
第二種方式(動態進行列的添加)
<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 | 老k | 一萬 |
| 2018-08-01 | 炸彈 | 一條 |
| 2018-08-02 | 對子 | 一萬 |
以上就是利用vue如何實現一個動態表格提交參數的功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
