赞
踩
实现效果:
- <el-table :data="paramTable" border tooltip-effect="light" size="mini" @cell-dblclick="cellClick">
- <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
- <el-table-column prop="factorLevel" label="值" align="center" show-overflow-tooltip>
- <template slot-scope="scope">
- <el-input size="mini" v-model="scope.row.factorLevel" v-if="scope.row.flag" @blur="inputClick(scope.row)" v-focus></el-input>
- <span v-if="!scope.row.flag">{{scope.row.factorLevel}}</span>
- </template>
- </el-table-column>
- <el-table-column fixed="right" label="操作" align="center" width="90px">
- <template slot-scope="scope">
- <el-button size="mini" type="text" icon="el-icon-delete"></el-button>
- </template>
- </el-table-column>
- </el-table>
- <script>
- export default {
- data(){
- return{
- paramTable:[{
- factorLevel:1,
- flag:false
- },{
- factorLevel:2,
- flag:false
- },{
- factorLevel:3,
- flag:false
- }]
- }
- },
- directives: {
- // 注册一个局部的自定义指令 v-focus
- focus: {
- // 指令的定义
- inserted: function (el) {
- // 聚焦元素
- el.querySelector('input').focus()
- }
- }
- },
- methods: {
- //双击单元格后,显示input,并通过v-focus让input自动获取焦点
- cellClick(row){
- row.flag=true
- console.log(row)
- },
- //input框失去焦点事件
- inputClick(row){
- row.flag=false
- }
- }
- }
- </script>
双击单元格后,显示input,并通过v-focus让input自动获取焦点
input框失去焦点事件
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。