<template>
<div id="app">
<el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
<el-table-column label="日期" width="180">
<template scope="scope">
<div class="block">
</div>
<el-input size="small" v-model="scope.row.date1" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{scope.row.date1}}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template scope="scope">
<el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址">
<template scope="scope">
<el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input>
<span>{{scope.row.address}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<template>
<el-date-picker v-model="Thedate" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">
</el-date-picker>
<el-input maxlength="5" v-model="names" style="width:180px" placeholder="请输入姓名"></el-input>
<el-input v-model="ress" style="width:588px;" placeholder="请输入地址"></el-input>
<el-button v-on:click="handAdd">确定</el-button>
</template>
</div>
</template>
<script>
export default {
name: 'acountent',
data(){
return {
pickerOptions1: {
disabledDate(time) {
return time.getTime() > Date.now();
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date());
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit('pick', date);
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', date);
}
}]
},
tableData: [{
date1: '2016-05-02', name: '小艳', address: '成都市'
}, {
date1: '2016-05-04', name: '小花', address: '成都市'
}, {
date1: '2016-05-01', name: '小明', address: '成都市'
}, {
date1: '2016-05-03', name: '小河', address: '成都市'
}],
Thedate: "",
names: "",
ress: ""
}
},
methods: {
handleCurrentChange: function(row, event, column) {
console.log(row, event, column, event.currentTarget)
},
handleEdit: function(index, row) {
console.log(index, row);
},
handleDelete: function(index, row) {
this.tableData.splice(index, 1)
},
handAdd: function() {
console.log(this.Thedate)
this.tableData.push({ date1: this.Thedate, name: this.names, address: this.ress })
}
}
}
</script>
<style scoped>
* {
margin: 0;
padding: 0
}
.tb-edit .el-input {
display: none
}
.tb-edit .current-row .el-input {
display: block
}
.tb-edit .current-row .el-input+span {
display: none
}
</style>