当前位置:网站首页>【饿了么动态表格】
【饿了么动态表格】
2022-07-05 09:27:00 【果东布丁】
<template>
<div>
<el-button @click="add">新增一行</el-button>
<el-button @click="save">保存</el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="compty" label="日期" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.compty" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column prop="brand" label="姓名" width="180">
<template slot-scope="scope">
<el-select v-model="scope.row.brand" placeholder="请选择">
<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="日期" width="180">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
compty: null,
tableData: [
// {
// date: '2016-05-02',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1518 弄'
// }, {
// date: '2016-05-04',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1517 弄'
// }, {
// date: '2016-05-01',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1519 弄'
// }, {
// date: '2016-05-03',
// name: '王小虎',
// address: '上海市普陀区金沙江路 1516 弄'
// }
],
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
}
},
created() {
},
methods: {
add() {
this.tableData.push({
compty: null,
brand: null,
})
},
save() {
console.log('保存的数据',this.tableData);
},
deleteRow(index,row) {
console.log('index',index);
console.log('row',row);
console.log(this.tableData);
this.tableData.splice(index,1)
}
},
}
</script>
边栏推荐
- A keepalived high availability accident made me learn it again
- np. allclose
- Using request headers to develop multi terminal applications
- High performance spark_ Transformation performance
- Understanding of smt32h7 series DMA and DMAMUX
- Introduction Guide to stereo vision (1): coordinate system and camera parameters
- Cloud computing technology hotspot
- MYSQL 对字符串类型排序不生效问题
- Can't find the activitymainbinding class? The pit I stepped on when I just learned databinding
- [beauty of algebra] solution method of linear equations ax=0
猜你喜欢
Applet data attribute method
LeetCode 31. 下一个排列
Android privacy sandbox developer preview 3: privacy, security and personalized experience
Rebuild my 3D world [open source] [serialization-3] [comparison between colmap and openmvg]
Introduction Guide to stereo vision (1): coordinate system and camera parameters
编辑器-vi、vim的使用
图神经网络+对比学习,下一步去哪?
一次 Keepalived 高可用的事故,让我重学了一遍它
什么是防火墙?防火墙基础知识讲解
22-07-04 Xi'an Shanghao housing project experience summary (01)
随机推荐
Unity skframework framework (XXII), runtime console runtime debugging tool
np. allclose
【PyTorch Bug】RuntimeError: Boolean value of Tensor with more than one value is ambiguous
Wechat applet obtains household area information
Kotlin introductory notes (III) kotlin program logic control (if, when)
Principle and performance analysis of lepton lossless compression
Android privacy sandbox developer preview 3: privacy, security and personalized experience
图神经网络+对比学习,下一步去哪?
一文详解图对比学习(GNN+CL)的一般流程和最新研究趋势
什么是防火墙?防火墙基础知识讲解
Applet global style configuration window
[beauty of algebra] singular value decomposition (SVD) and its application to linear least squares solution ax=b
Vs code problem: the length of long lines can be configured through "editor.maxtokenizationlinelength"
Applet (global data sharing)
利用请求头开发多端应用
NIPS2021 | 超越GraphCL,GNN+对比学习的节点分类新SOTA
C # image difference comparison: image subtraction (pointer method, high speed)
Explain NN in pytorch in simple terms CrossEntropyLoss
浅谈Label Smoothing技术
Rebuild my 3D world [open source] [serialization-2]