<template>
|
<div class="app-container">
|
<div>
|
<Titlename title="列表页面"></Titlename>
|
<div class="whole">
|
<el-form ref="form" :model="form" label-width="100px">
|
<el-form-item style="text-align: right;">
|
<el-button class="btn" type="primary" size="small" icon="el-icon-plus" @click="onSubmit">添加</el-button>
|
<el-button size="small">批量删除</el-button>
|
</el-form-item>
|
</el-form>
|
<el-table
|
:data="tableData"
|
size="mini"
|
style="width: 1600px"
|
@cell-mouse-enter="handleCellEnter"
|
@cell-mouse-leave="handleCellLeave"
|
@cell-click="handleCellClick"
|
>
|
<el-table-column
|
type="selection"
|
align="center"
|
width="55">
|
</el-table-column>
|
<el-table-column
|
prop="fillingTime"
|
align="center"
|
width="220"
|
label="填报时间">
|
<div class="item" slot-scope="scope">
|
<!-- <el-input class="item__input" v-model="scope.row.fillingTime" placeholder="请输入内容"></el-input>-->
|
<el-date-picker
|
class="item__input"
|
v-model="scope.row.fillingTime"
|
type="date"
|
ref="saveDateInput"
|
placeholder="选择日期" clearable>
|
</el-date-picker>
|
<div class="item__txt">{{scope.row.fillingTime}}</div>
|
</div>
|
</el-table-column>
|
<el-table-column
|
prop="filledBy"
|
align="center"
|
width="300"
|
label="填报人">
|
<div class="item" slot-scope="scope">
|
<el-input class="item__input" v-model="scope.row.filledBy" placeholder="请输入内容"></el-input>
|
<div class="item__txt">{{scope.row.filledBy}}</div>
|
</div>
|
</el-table-column>
|
<el-table-column
|
prop="progress"
|
label="整改形象进度"
|
width="300"
|
align="center">
|
<div class="item" slot-scope="scope">
|
<el-input class="item__input" v-model="scope.row.progress" placeholder="请输入内容" clearable></el-input>
|
<div class="item__txt">{{scope.row.progress}}</div>
|
</div>
|
</el-table-column>
|
<el-table-column
|
prop="remarks"
|
label="备注"
|
align="center">
|
<div class="item" slot-scope="scope">
|
<el-input type="textarea" class="item__input" v-model="scope.row.remarks" placeholder="请输入内容" clearable></el-input>
|
<div class="item__txt">{{scope.row.remarks}}</div>
|
</div>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
width="200">
|
<template slot-scope="scope">
|
<el-button type="text" size="small">编辑</el-button>
|
<el-button @click="save(scope.row)" type="text" size="small">保存</el-button>
|
<el-button type="text" size="small" style="color: #f56c6c">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import Titlename from "../../components/Titlename/index.vue";
|
export default {
|
components: {Titlename},
|
name: "fillProgress",
|
data(){
|
return{
|
// tableData: [],
|
tableData: [{
|
fillingTime: '2016-05-02',
|
progress: '无进度',
|
remarks: '222222222',
|
filledBy:'王小虎'
|
}, {
|
fillingTime: '2016-05-02',
|
progress: '无进度',
|
remarks: '222222222',
|
filledBy:'王小虎'
|
}],
|
// // 需要编辑的属性
|
// editProp: ['fillingTime', 'progress', 'remarks'],
|
// // 保存进入编辑的cell
|
// clickCellMap: {},
|
// 需要编辑的属性
|
editProp: ['fillingTime', 'progress', 'remarks','filledBy'],
|
// 保存进入编辑的cell
|
clickCellMap: {}
|
}
|
},
|
methods: {
|
/** 鼠标移入cell */
|
handleCellEnter (row, column, cell, event) {
|
const property = column.property
|
if (property === 'date' || property === 'name' || property === 'food') {
|
cell.querySelector('.item__txt').classList.add('item__txt--hover')
|
}
|
},
|
/** 鼠标移出cell */
|
handleCellLeave (row, column, cell, event) {
|
const property = column.property
|
if (this.editProp.includes(property)) {
|
cell.querySelector('.item__txt').classList.remove('item__txt--hover')
|
}
|
},
|
/** 点击cell */
|
handleCellClick (row, column, cell, event) {
|
const property = column.property
|
if (this.editProp.includes(property)) {
|
// 保存cell
|
this.saveCellClick(row, cell)
|
cell.querySelector('.item__txt').style.display = 'none'
|
cell.querySelector('.item__input').style.display = 'block'
|
cell.querySelector('input').focus()
|
}
|
},
|
/** 取消编辑状态 */
|
cancelEditable (cell) {
|
cell.querySelector('.item__txt').style.display = 'block'
|
cell.querySelector('.item__input').style.display = 'none'
|
},
|
/** 保存进入编辑的cell */
|
saveCellClick (row, cell) {
|
const id = row.id
|
if (this.clickCellMap[id] !== undefined) {
|
if (!this.clickCellMap[id].includes(cell)) {
|
this.clickCellMap[id].push(cell)
|
}
|
} else {
|
this.clickCellMap[id] = [cell]
|
}
|
},
|
/** 保存数据 */
|
save (row) {
|
const id = row.id
|
// 取消本行所有cell的编辑状态
|
this.clickCellMap[id].forEach(cell => {
|
this.cancelEditable(cell)
|
})
|
this.clickCellMap[id] = []
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
height: 850px;
|
overflow-y: auto;
|
}
|
.btn {
|
background-color: #034ea2;
|
border: 1px solid #034ea2;
|
}
|
.item .item__input{
|
display: none;
|
font-size: 14px;
|
}
|
.item .item__input .el-input__inner{
|
height: 24px!important;
|
}
|
/*/deep/ .el-input__inner{*/
|
/* width: 200px;*/
|
/*}*/
|
/*/deep/ .el-textarea__inner{*/
|
/* width: 200px;*/
|
/*}*/
|
.item .item__input .el-input__suffix i{
|
font-size: 14px !important;
|
line-height: 26px !important;
|
}
|
.item .item__txt{
|
box-sizing: border-box;
|
border: 1px solid transparent;
|
width: 100%;
|
line-height: 24px;
|
font-size: 14px;
|
padding: 0 8px;
|
}
|
|
</style>
|
