模板
<template>
<div class="record">
<el-table :data="tableData" style="width: 100%" align='center'>
<el-table-column label="序号" align='center' >
<template slot-scope="scope">
<div slot="reference" >
<p>{{ scope.row.sub_num }}</p>
</div>
</template>
</el-table-column>
<!-- 调用接口数据的下拉菜单-->
<el-table-column label="状态" property="status" align='center'>
<template slot-scope="scope">
<el-select v-model="form.status" size="medium">
<el-option label="" v-for="item in status_name" placeholder=''"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column><el-table-column label="内容" property="content" align='center'>
<template slot-scope="scope">
<div slot="reference" >
<!-- @keyup.enter.native键盘事件:回车 -->
<el-input size="medium" v-model="scope.row.content" ref='content' @keyup.enter.native="add(scope.$index,scope.row)"></el-input>
</div>
</template>
</el-table-column>
<el-table-column label="人员" property="person" align='center'>
<template slot-scope="scope">
<div slot="reference" >
<p>管理员</p>
</div>
</template>
</el-table-column>
<el-table-column property="enter_data" label="日期" align='center'>
</el-table-column>
<el-table-column label="操作" align='center'>
<template slot-scope="scope">
<!-- @click点击事件 -->
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="button">
<el-button type="success">保存</el-button>
</div>
</div>
</div></template>
交互
<script>
调用接口
import {searchServiceState} from '../../service'
export default {
name: 'Home',
data() {
return {
tableData:[],
type:'"",
status_name:[]
}
},
mounted() {
this.type = this.$route.params.type
searchServiceState({type:0,order_type:this.type==='main' ? 0:1}).then((res) =>{
this.status_name= res.data.data.map(item => {
console.log(item.name);
return {value: item.name, label: item.name}
})
})
},
methods: {
handleDelete(index, row) {
console.log(row);
判断当前数据的长度大于1 && 当前数据不是最后一条数据
if(this.tableData.length > 1 && index != this.tableData.length-1){
this.tableData.splice(index, 1);
};
},
回车后添加一条数据
add:function(index, row){
// console.log(this.tableData.length-1);
判断如果是最后一条数据,则添加
if(index == this.tableData.length-1){
row.sub_num = "";
this.tableData.push(
{
sub_num:'输入',
status: '',
content: '',
person: '',
enter_data: '',
}
)
}
}
}
}
</script>