当前位置:网站首页>[hungry dynamic table]
[hungry dynamic table]
2022-07-05 09:28:00 【Guodong pudding】
<template>
<div>
<el-button @click="add"> Add a new line </el-button>
<el-button @click="save"> preservation </el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="compty" label=" date " width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.compty" placeholder=" Please enter the content "></el-input>
</template>
</el-table-column>
<el-table-column prop="brand" label=" full name " width="180">
<template slot-scope="scope">
<el-select v-model="scope.row.brand" placeholder=" Please select ">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label=" date " width="180">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small">
remove
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
compty: null,
tableData: [
// {
// date: '2016-05-02',
// name: ' X.h. ',
// address: ' Jinshajiang road, putuo district, Shanghai 1518 get '
// }, {
// date: '2016-05-04',
// name: ' X.h. ',
// address: ' Jinshajiang road, putuo district, Shanghai 1517 get '
// }, {
// date: '2016-05-01',
// name: ' X.h. ',
// address: ' Jinshajiang road, putuo district, Shanghai 1519 get '
// }, {
// date: '2016-05-03',
// name: ' X.h. ',
// address: ' Jinshajiang road, putuo district, Shanghai 1516 get '
// }
],
options: [{
value: ' Options 1',
label: ' Golden cake '
}, {
value: ' Options 2',
label: ' Double skin milk '
}, {
value: ' Options 3',
label: ' Oyster omelet '
}, {
value: ' Options 4',
label: ' dragon whiskers noodles '
}, {
value: ' Options 5',
label: ' Beijing Roast Duck '
}],
}
},
created() {
},
methods: {
add() {
this.tableData.push({
compty: null,
brand: null,
})
},
save() {
console.log(' Saved data ',this.tableData);
},
deleteRow(index,row) {
console.log('index',index);
console.log('row',row);
console.log(this.tableData);
this.tableData.splice(index,1)
}
},
}
</script>
边栏推荐
- Kotlin introductory notes (V) classes and objects, inheritance, constructors
- 【两个对象合并成一个对象】
- LeetCode 503. 下一个更大元素 II
- 一次 Keepalived 高可用的事故,让我重学了一遍它
- Greendao reported an error in qigsaw, could not init daoconfig
- [ManageEngine] how to make good use of the report function of OpManager
- Multiple solutions to one problem, asp Net core application startup initialization n schemes [Part 1]
- 一题多解,ASP.NET Core应用启动初始化的N种方案[上篇]
- Unity SKFramework框架(二十三)、MiniMap 小地图工具
- Cloud computing technology hotspot
猜你喜欢
L'information et l'entropie, tout ce que vous voulez savoir est ici.
Introduction Guide to stereo vision (4): DLT direct linear transformation of camera calibration [recommended collection]
图神经网络+对比学习,下一步去哪?
LeetCode 556. 下一个更大元素 III
Figure neural network + comparative learning, where to go next?
Unity skframework framework (XXII), runtime console runtime debugging tool
LeetCode 31. Next spread
nodejs_ fs. writeFile
【sourceTree配置SSH及使用】
Generate confrontation network
随机推荐
一篇文章带你走进cookie,session,Token的世界
STM32简易多级菜单(数组查表法)
[ctfhub] Title cookie:hello guest only admin can get flag. (cookie spoofing, authentication, forgery)
Global configuration tabbar
信息与熵,你想知道的都在这里了
Driver's license physical examination hospital (114-2 hang up the corresponding hospital driver physical examination)
Introduction Guide to stereo vision (3): Zhang calibration method of camera calibration [ultra detailed and worthy of collection]
我的一生.
22-07-04 西安 尚好房-项目经验总结(01)
Kotlin introductory notes (I) kotlin variables and non variables
An article takes you into the world of cookies, sessions, and tokens
【数组的中的某个属性的监听】
【饿了么动态表格】
np. allclose
一次 Keepalived 高可用的事故,让我重学了一遍它
【对象数组a与对象数组b取出id不同元素赋值给新的数组】
It's too difficult to use. Long articles plus pictures and texts will only be written in short articles in the future
Applet (use of NPM package)
nodejs_ fs. writeFile
LeetCode 31. Next spread