console
var vm = new Vue({
el: '#vm',
data: {
offer: [{
type_id:'1',
type_name:'机票',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'2',
type_name:'酒店',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'3',
type_name:'签证',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'4',
type_name:'保险',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'5',
type_name:'商务考察',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'6',
type_name:'用车',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'7',
type_name:'餐饮',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'8',
type_name:'导游',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'9',
type_name:'轮船',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'10',
type_name:'火车',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'11',
type_name:'门票',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'12',
type_name:'会议',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'13',
type_name:'服务费',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'14',
type_name:'团建拓展',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}, {
type_id:'15',
type_name:'其他',
title: '',
date: '',
price: 0,
number:1,
time:1,
total_price:0,
discount: 0,
other: '',
}]
},
methods: {
//删除某个项目的报价
delete_offer:function(index){
vm.offer.splice(index,1)
},
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="vm">
<el-table :data="offer" border style="width: 100%">
<el-table-column fixed prop="type_name" label="类型" width="100">
</el-table-column>
<el-table-column prop="title" label="名称" width="200">
<template slot-scope="scope">
<input v-model="scope.row.title" class="plan-input" style="width: 180px" placeholder="请输入名称">
</template>
</el-table-column>
<el-table-column prop="date" label="使用日期" width="370">
<template slot-scope="scope">
<div class="block">
<el-date-picker
v-model="scope.row.date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" width="450">
<template slot-scope="scope">
<template v-if="scope.row.type_id==1">
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">人 *
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">次 = {{scope.row.total_price}}元
</div>
</template>
<template v-else-if="scope.row.type_id==2">
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">间 *
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">晚 = {{scope.row.total_price}}元
</div>
</template>
<template v-else-if="scope.row.type_id==6">
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">辆 *
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">天 = {{scope.row.total_price}}元
</div>
</template>
<template v-else-if="scope.row.type_id==7">
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">人 *
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">次 = {{scope.row.total_price}}元
</div>
</template>
<template v-else-if="scope.row.type_id==8">
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">团 *
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">天 = {{scope.row.total_price}}元
</div>
</template>
<template v-else-if="scope.row.type_id==13">
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">人 *
<input v-model="scope.row.time" type="text" class="plan-input" style="width: 50px">天 = {{scope.row.total_price}}元
</div>
</template>
<template v-else>
<div class="">
<input v-model="scope.row.price" type="text" class="plan-input" style="width: 80px">元 *
<input v-model="scope.row.number" type="text" class="plan-input" style="width: 50px">人 = {{scope.row.total_price}}元
</div>
</template>
</template>
</el-table-column>
<el-table-column prop="province" label="优惠" width="120">
<template slot-scope="scope">
<input v-model="scope.row.discount" type="text" class="plan-input" style="width: 100px">
</template>
</el-table-column>
<el-table-column prop="city" label="备注" width="200">
<template slot-scope="scope">
<textarea v-model="scope.row.other" placeholder="补充说明" class="plan-textarea" style="width:180px;height: 52px;"></textarea>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button v-on:click="delete_offer(scope.$index)" type="danger" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>