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>
- 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在数据绑定方面有了更深的了解…