前言
最近项目在做节假日管理，需要有一个操作就是用户双击表格里的某一行，可以修改该行，并且有输入框和选择框。
实现效果：
<el-table
v-loading="isLoading" element-loading-text="拼命加载中..."
ref="tableRef"
:data="tableData"
:max-height="maxHeight"
border
@row-click="handleRowClick"
@row-dblclick="handleRowDblclick"
stripe>
<el-table-column
v-for="item in tableColData"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable"
:width="item.width"
:align="item.align">
<!--主要实现判断-->
<template slot-scope="scope">
<template v-if="addForm.weekName === scope.row.weekName">
<el-input type="text" v-model="scope.row[item.prop]" v-if="item.prop !== 'workType' && item.prop !== 'weekName'" @blur="handleBlur($event, scope.row)"></el-input>
<el-select v-else-if="item.prop === 'workType'" v-model="scope.row[item.prop]">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
<template v-else>
<span v-if="item.prop === 'weekName'">{{ scope.row[item.prop]}}</span>
<span v-else-if="item.prop === 'workType'">{{ scope.row.workType === 0 ? '工作日' : '节假日' }}</span>
<span v-else>{{ scope.row[item.prop] }}</span>
</template>
</template>
</el-table-column>
<el-table-column
label="操作"
width="60px"
align="center">
<template slot-scope="scope">
<el-button type="primary" plain size="mini" icon="iconfont icon-bianji" circle title="修改" @click.stop="handleEdit($event, scope.row, scope.$index)"></el-button>
</template>
</el-table-column>
</el-table>
<script>
methods: {
handleRowClick (row) {
this.addForm = {}
// this.handleBlur(row)
},
handleRowDblclick (row, event) {
event.stopPropagation()
event.preventDefault()
this.addForm = Utils.deepCopy(row)
},
// 调用接口
handleBlur (e, row) {
// 调用完成后将this.addForm = {}
}
}
</script>