vue动态生成行
vue代码
<el-table :data="form.lineInfos" :border=true style="width: 99.99%;">
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column prop="unitPrice" label="单价" width="150">
<template slot-scope="scope">
<el-input-number v-model="scope.row.unitPrice" controls-position="right"
:min="1" :precision="2" :max="999999" size="small"
@blur="unitPriceInput($event)"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="deliverCharge" label="送货费" width="150">
<template slot-scope="scope">
<el-input-number v-model="scope.row.deliverCharge" controls-position="right"
:min="1" :precision="2" :max="999999" size="small"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="landingCharge" label="卸货费" width="150">
<template slot-scope="scope">
<el-input-number v-model="scope.row.landingCharge" controls-position="right"
:min="1" :precision="2" :max="999999" size="small"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="totalPrice" label="总价" width="150">
<template slot-scope="scope">
<el-input v-model="scope.row.totalPrice" id="totalPrice" size="small" placeholder="请输入" />
</template>
</el-table-column>
<el-table-column prop="startRoute" label="起始线路" width="350">
<template slot-scope="scope">
<el-input v-model="scope.row.startRoute" placeholder="请输入终点线路" />
</template>
</el-table-column>
<el-table-column prop="endRoute" label="终点线路" width="350">
<template slot-scope="scope">
<el-input v-model="scope.row.endRoute" placeholder="请输入终点线路" />
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<el-button size="mini" type="danger" plain @click="removeLineInfos(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
js代码
export default {
name: "LineEdit",
data() {
return {
form: {
lineInfos: [{
value: ''
}],
}
}
}
// 动态删除行
removeLineInfos(index, row){
var that = this;
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//点击确定的操作(调用接口)
var lineInfos = that.form.lineInfos;
for (var i = 0; i < lineInfos.length; i++) {
if (row.id == lineInfos[i].id) {
that.form.lineInfos.splice(i, 1);
}
}
}).catch(() => {
//点取消的提示
return;
});
},
// 动态增加行
addLineInfos(){
var member = this.form.lineInfos;
console.log(member);
var length = member.length;
this.form.lineInfos.push(
{
id: parseInt(length),
name: '',
relationship: '',
mobile: '',
birthday: '',
gongzuodanwei: '',
});
},
}
