ElementUI实现可编辑表格

实现效果：

• 【可编辑单元格】双击某个单元格 该单元格变为input输入框 编辑修改目标单元格 ；并通过v-focus让input自动获取焦点
• input输入框失去焦点时 input输入框隐藏 展示默认Table 

<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框失去焦点事件

 Element-UI可编辑表格的实现

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/11204.html