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

});

},

}

相关推荐
pe7er4 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
pe7er12 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
islandzzzz24 分钟前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
喝拿铁写前端25 分钟前
前端实战优化:在中后台系统中用语义化映射替代 if-else,告别魔法数字的心智负担
前端·javascript·架构
超人不会飛1 小时前
就着HTTP聊聊SSE的前世今生
前端·javascript·http
蓝胖子的多啦A梦1 小时前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 小时前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
The_cute_cat1 小时前
JavaScript的初步学习
开发语言·javascript·学习
海天胜景1 小时前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
用户3802258598241 小时前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js