VUE元素用户界面实现简单的表格行内编辑效果的示例的代码

原理是通过钢性铸铁控制绑定的输入控件与显示值，在选中行样式下对控件进行隐藏或显示

效果示例地址

！DOCTYPE html html head meta charset=' UTF-8 '！-引入样式- link rel='样式表href=' https://unpkg。com/element-ui/lib/theme-default/index。CSS ' rel='外部没有“跟随”样式* {边距： ^ 0；padd : 0 } body { font-family : Helvetica Neue，Helvetica，方平希拉基诺无国标，微软雅黑，SimSun，Sans-serif；飞越：汽车；字体粗细： 400；-网络套件-字体-流畅：抗锯齿；}.编辑埃尔.输入{ display: none} .编辑。当前行埃尔.输入{ display: block} .编辑。当前行El-输入span { display : none }/style/head body div id=' app ' El-table : data=' table data ' class=' TB-edit ' style=' width : 100% ' highlight-current-row @ row-click=' handleCurrentChange ' El-table-column label='日期宽度='180 '模板作用域=' scope ' El-input size=' small ' v-model=' scope。划船。日期占位符='请输入内容@change='handleEdit(作用域$index，scope。row)'/El-输入范围{ { scope。划船。date } }/span/template/El-table-column El-table-column标签='姓名宽度='180 '模板作用域=' scope ' El-input size=' small ' v-model=' scope。划船。名称“占位符=”请输入内容@change='handleEdit(作用域$index，scope。row)'/El-输入范围{ { scope。划船。name } }/span/template/El-table-column El-table-column prop=' address ' label='地址模板作用域=' scope ' El-input size=' small ' v-model=' scope。划船。地址“占位符=”请输入内容@change='handleEdit(作用域$index，scope。row)'/El-输入范围{ { scope。划船。address } }/span/template/El-table-column El-table-column标签='操作模板作用域='作用域！-El-button size=' small ' @ click=' handleEdit(作用域$index，scope.row)编辑/El-button-El-button size=' small ' type=' danger ' @ click=' handleDelete(作用域$index，scope.row)删除/El-按钮/模板/El-表格-列/El-表格英国铁路公司数据： { { tableData } }/div/body脚本src=' http :3359 unpkg。com/Vue/dist/Vue。js '/script script src=' http :https://unpkg。com/element-ui/lib/index。js '/脚本脚本var app=new Vue({ El : ' # app '，data : { tableData 3360[{ date : ' '王小虎，地址： '上海市普陀区金沙江路1518 弄}，{ date: '2016-05-04 '，name: '王小虎，地址： '上海市普陀区金沙江路1517 弄}，{ date: '2016-05-01 '，name: '王小虎，地址： '上海市普陀区金沙江路1519 弄}，{ date: '2016-05-03 '，name: '王小虎，地址： '上海市普陀区金沙江路1516 弄}] }，方法： { handleCurrentChange(行，事件，列){ console.log(行，事件，列，event.currentTarget) }，handleEdit(索引，行){ console.log(索引，行);}，handleDelete(索引，行){ console.log(索引，行);} } })/脚本/html根据原理自定义效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。