输入框及数据表的使用在quasar中

Quasar框架

Quasar中关于输入框与数据表的使用

先贴代码:

    <q-tab-pane name="tab-1" class="q-pa-none">
        <q-card class="bg-white no-shadow full-width">
            <q-card-main class="q-px-md">
                <div class="row justify-start gutter-x-md gutter-y-sm scroll">
                    <q-field label="供应商名称:" orientation="vertical" class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                        <q-input v-model.trim="baseAddOrEditForm.input1" ></q-input>
                    </q-field>             
                </div>
    </q-tab-pane>

1. label----上部的提示文字;
   利用Vue数据的双向绑定属性填充数据—v-model.trim=“baseAddOrEditForm.input1” ;
   watch中监听数据的变化,并用于数据的计算,代码如下:

  'aba.form.machineForm.rows': {
			handler: function (rows) {
				var that = this, colsum = 0;
				rows.forEach(function (row) {
					//金额
					if (row.col1 == '' || row.rem1 == '') {
						row.mem1 = ''
					}
					else {
						row.mem1 = row.col1 * 1 * (row.rem1 * 1)
					}
					if(row.col1 == '' || row.rem1 == '' ){
						row.mem2 = ''
					}else{
				  	       row.sum1 = row.mem1*1 + row.mem2*1 + row.mem3*1 + row.mem4*1  + row.mem5*1 + row.mem6*1  + row.mem7*1 + row.mem8*1  + row.mem9*1 + row.mem10*1				
					}
				});				
				this.aba.form.machineForm.total = colsum;
				this.$emit('change', [this.baseAddOrEditForm, this.aba]);
				//将变化的数据传递给父组件
			},
			deep: true
		}

2)在组件中回显其中的数据

//接收回显的数据
props: {
		data: {
			default: function () {
				return []
			}
		},
		readonly: {
			type: Boolean,
			default: function () {
				return false
			}
		}
	},
//数据挂载	
mounted: function () {
		if (this.data && this.data.length) {
			this.baseAddOrEditForm = this.data[0]
			this.aba = this.data[1]
		}
	},

3)表格中行计算,列计算

'aba.form.machineForm.othcost.rows': {
			handler: function (rows) {
				var that = this, colsum = 0;
				rows.forEach(function (row) {
					//row.mem1 = (row.col1 * 1) * (row.rem1 * 1)
				})
				rows.forEach(function (row) {
				    //列计算
					colsum += row.mem1 * 1
				});
				//管理费用
				this.aba.form.machineForm.othcost.rows[0].mem1 =(this.aba.form.machineForm.design.sum*1+this.aba.form.machineForm.clcost.sum*1+this.aba.form.machineForm.rcost.sum*1+this.aba.form.machineForm.jgcost.sum*1+this.aba.form.machineForm.meacost.sum*1+this.aba.form.machineForm.othcost.rows[3].mem1*1+this.aba.form.machineForm.othcost.rows[4].mem1*1)*0.05;
				//利润
				this.aba.form.machineForm.othcost.rows[1].mem1 =(this.aba.form.machineForm.design.sum*1+this.aba.form.machineForm.clcost.sum*1+this.aba.form.machineForm.rcost.sum*1+this.aba.form.machineForm.jgcost.sum*1+this.aba.form.machineForm.meacost.sum*1+this.aba.form.machineForm.othcost.rows[3].mem1*1+this.aba.form.machineForm.othcost.rows[4].mem1*1)*0.10;
				//税收
				this.aba.form.machineForm.othcost.rows[2].mem1 =(this.aba.form.machineForm.design.sum*1+this.aba.form.machineForm.clcost.sum*1+this.aba.form.machineForm.rcost.sum*1+this.aba.form.machineForm.jgcost.sum*1+this.aba.form.machineForm.meacost.sum*1+this.aba.form.machineForm.othcost.rows[3].mem1*1+this.aba.form.machineForm.othcost.rows[4].mem1*1)*0.16;
				//小计
				this.aba.form.machineForm.othcost.sum = colsum
				//总计
				//不含税总价
				this.aba.form.machineForm.total = this.aba.form.machineForm.design.sum*1+this.aba.form.machineForm.clcost.sum*1+this.aba.form.machineForm.rcost.sum*1+this.aba.form.machineForm.jgcost.sum*1+this.aba.form.machineForm.meacost.sum*1+this.aba.form.machineForm.othcost.sum*1
				//含税总价
				this.aba.form.machineForm.totalre = (this.aba.form.machineForm.design.sum*1+this.aba.form.machineForm.clcost.sum*1+this.aba.form.machineForm.rcost.sum*1+this.aba.form.machineForm.jgcost.sum*1+this.aba.form.machineForm.meacost.sum*1+this.aba.form.machineForm.othcost.sum*1)*1.16
				this.$emit('change', [this.baseAddOrEditForm, this.aba]);
			},
			deep: true
		}

感觉只要定义的数据格式没什么太大的问题,在计算的时候就不会有太多的问题…

4)说到表格难免就会有一些行合并,列合并…循环时使用三目法进行判断

:rowspan = "index > 3 ? 3 : 1"  
:colspan = "index < 1 ? 2 : 0"  

小结:这几天通过使用quasar这个框架,对数据的计算以及Vue在数据绑定方面有了更深的了解…