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: '',

});

},

}

相关推荐
rui锐rui30 分钟前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
伍哥的传说31 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥33 分钟前
JavaScript之数组方法详解
javascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
bug爱好者1 小时前
原生小程序如何实现跨页面传值
前端·javascript
bug爱好者2 小时前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina2 小时前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试
前端wchen2 小时前
Vue 3 组件通信实战系列(一)父子组件通信的标准姿势:Props 与 Emit(含实战与进阶技巧)
前端·vue.js