动态添加表格中下拉框

父级页面

<div class="threePart"><ul><li style="width:114px"><span style="color:red;">*</span>场景</li><li style="width:222px"><span style="color:red;">*</span>账号</li><li style="width:112px"><span style="color:red;">*</span>交易类型</li><li style="width:113px"><span style="color:red;">*</span>收支类型</li><li style="width:112px"><span style="color:red;">*</span>交易币种</li><li style="width:142px"><span style="color:red;">*</span>交易金额</li><li style="width:232px"><span style="color:red;">*</span>交易时间</li><li style="width:223px"><span style="color:red;">*</span>备注</li><li style="width:91px;border-right:1px solid #a7a6a6;">操作</li></ul><table border="1" cellspacing="0"><tbody id="tbMain"><tr1 v-for="(it,index) in quotations" :key="it.id" :ref="'quotation' + index" :rowDate="it" :handlingFeeCurrency="ruleFormSecond.handlingFeeCurrency" :transactionCurrency="ruleFormSecond.transactionCurrency" :scenesLists="scenesList" @add="addLedger" @del="del(index)"></tr1></tbody></table></div>

父级页面js

import tr1 from './tr-con.vue'
export default {data() {// 业务分类基准数据格式const quotationBase = {a: undefined,b: undefined}return {// 业务分类基准数据格式quotationBase,quotations: [{'id': '-3'}]}},methods: {// 添加台账记录addLedger() {if (this.quotations.length < 10) {const quotation = Object.assign({ id: this.randomString(9) }, this.quotationBase)this.quotations.push(quotation)} else {this.$message({message: '最多可录入10笔台账',type: 'warning'})}},randomString(length) {const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'let result = ''for (let i = length; i > 0; --i) {result += str[Math.floor(Math.random() * str.length)]}return result},// 删除台账记录del(k) {this.quotations.splice(k, 1)},}
}

父级页面样式

.threePart {width: 1361px;ul {list-style: none;word-wrap: nowrap;li {text-align: center;display: inline-block;border: 1px solid #a7a6a6;padding: 5px;border-bottom: 0;border-right: 0;}}table {width: 1360px;border: 1px solid #a7a6a6;tbody {td {padding: 5px;text-align: center;a {font-size: 24px;margin-left: 3px;}.el-input__icon {color: #7b7b7c !important;}.el-input__inner {border: 1px solid #7b7b7c !important;}}}}}

子级页面

<template><div class="tdCon"><tr><td style="width:100px"><el-select v-model="Data.transType" placeholder="请选择" style="width:100px"><el-option v-for="item in scenesLists" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></td><td style="width:210px"><el-input style="width:210px;" v-model="Data.accNo"></el-input></td><td style="width:100px"><el-select v-model="Data.busType" placeholder="请选择" style="width:100px"><el-option v-for="item in transactionTypeVal" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></td><td style="width:100px"><el-select v-model="Data.category" placeholder="请选择" style="width:100px"><el-option v-for="item in category" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></td><td style="width:100px"><!-- Data.currency --><el-select v-show="transactionCurrency === '' && handlingFeeCurrency === ''" v-model="Data.currency" placeholder="请选择" style="width:100px"><el-option v-for="item in transactionCurrencyVal" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><el-select v-show="transactionCurrency !== '' || handlingFeeCurrency !== ''" v-model="Data.currency" placeholder="请选择" style="width:100px"><el-option v-for="item in transactionCurrencyVal" v-show="transactionCurrency === item.value || handlingFeeCurrency === item.value || item.value===''" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></td><td style="width:130px"><el-input style="width:130px;" v-model="Data.transAmount"></el-input></td><td style="width:200px"><!-- <el-date-pickerv-model="Data.transTime"type="date":picker-options="pickerOptions"placeholder="选择日期"></el-date-picker> --><el-date-pickerv-model="Data.transTime"type="datetime":picker-options="pickerOptions"placeholder="选择日期"></el-date-picker></td><td style="width:210px"><el-input style="width:210px;" v-model="Data.remark"></el-input></td><td style="width:92px"><a @click="addLedger">+</a><a @click="del()">-</a></td></tr></div>
</template>

子级页面js

export default {name: 'TdCon',// scenesLists是场景的下拉内容props: ['scenesLists', 'transactionCurrency', 'rowDate', 'handlingFeeCurrency'],data() {// 表格数据基准格式const DataBase = {transType: '',accNo: '',busType: '',category: '',currency: '',transAmount: '',transTime: '',remark: ''}return {// 表格数据基准格式DataBase,// 表格数据Data: Object.assign({}, DataBase),transactionTypeVal: [{ value: '', label: '--请选择--' }],transactionCurrencyVal: [{ value: '', label: '--请选择--' }],category: [{ value: '', label: '--请选择--' },{ value: 'IN', label: '收入' },{ value: 'OUT', label: '支出' }],pickerOptions: {// 选择当前月份或大于当前月份时间disabledDate (time) {return time.getTime() < Date.now() - 8.64e7}}}},watch: {rowDate: {handler(){if (this.rowDate.transType !== undefined || this.rowDate.accNo !==undefined || this.rowDate.busType !== undefined || this.rowDate.category !== undefined || this.rowDate.currency !==undefined || this.rowDate.transAmount !==undefined || this.rowDate.remark !==undefined || this.rowDate.transTime !==undefined) {this.Data.transType = this.rowDate.transTypethis.Data.accNo = this.rowDate.accNothis.Data.busType = this.rowDate.busTypethis.Data.category = this.rowDate.categorythis.Data.currency = this.rowDate.currency this.Data.transAmount = this.rowDate.transAmountthis.Data.remark = this.rowDate.remarkthis.Data.transTime = this.rowDate.transTime}},immediate: true}},mounted() {this.acctTypeChannelListBusType()this.AccCurrencyListDictQuery()},methods: {addLedger() {this.$emit('add')},del() {this.$emit('del')},getData() {return Object.assign({}, this.Data)}}
}

子级页面样式

<style lang="scss">
.tdCon {width: 100%;
}
</style>

示例

动态添加表格中下拉框相关推荐

php表格tr,jQuery+ajax实现动态添加表格tr td功能示例
本文实例讲述了jQuery+ajax实现动态添加表格tr td功能.分享给大家供大家参考,具体如下: 功能:ajax获取后台返回数据给table动态添加tr/td html部分: ajax部分: va ...
报表汇总工具FineReport中下拉框如何显示多列
报表汇总工具FineReport中下拉框如何显示多列 VALUE("ds1",1,2,$$$,1) 数据查询ds1中第1列的值等于当前值$$$的行的第2列取第1个值点击下拉框控件 ...
ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
如下所示: $(function(){ $.ajax({ url:"departmentAction_getAllDep.action", type:"post" ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
java select下拉标签_java中下拉框select和单选按钮的回显操作
前提: 1.下拉框select 请选择部门 selected="selected" >${department.department} 2.单选按钮radio的回显 chec ...
layui表格下拉框无法显示
layui表格下拉框无法显示开发工具与关键技术:java 作者:彭浩达撰写时间:2019年 7月 4日 $(function () { layui.use(['layer', 'table'], ...
动态联动select下拉框实现
我们在做下拉框选择时,常常会遇到一种场景,就是需要两个下拉框,其中一个下拉框的选项和内容需要根据第一个的下拉框的选择动态变化. 比如我有大的分类: 有氧运动无氧运动选择有氧运动时,选项有:跑步, ...
动态渲染select下拉框选中状态
动态渲染select下拉框选中状态 <div><select name="selectBox" id="" class="selec ...

动态添加表格中下拉框

父级页面

父级页面js

父级页面样式

子级页面

子级页面js

子级页面样式

示例

动态添加表格中下拉框相关推荐

最新文章

热门文章