手机编程网站,浙江省嘉兴建设局官方网站,南昌做公司网站哪家好,wordpress电子商务主题 中文废话不多说上图#xff1a;
1.可编辑input 2.可编辑下来框 3.点击chechbox 4.可编辑radio 其实后面两种可以直接显示值 需要修改直接改就行
保持风格统一所以就做了点击之后出现修改功能
上代码#xff0c;不要哔哔 哈哈 粗暴 真得是曲不离口 拳不离手#xff0c; 几天…废话不多说上图
1.可编辑input 2.可编辑下来框 3.点击chechbox 4.可编辑radio 其实后面两种可以直接显示值 需要修改直接改就行
保持风格统一所以就做了点击之后出现修改功能
上代码不要哔哔 哈哈 粗暴 真得是曲不离口 拳不离手 几天不练习都不会写了
声明部分代码有借鉴
template
div classdivCaculateResultDisplaydiv classdivParamInput2label classlabConfidenceParamTitle结果/label/divdiv classdivNotAllowCaculateResultel-tableborderheight385:datatableDataclasstb-editstylewidth: 100%cell-clickgetCell:cell-class-nametableCellClassNamehighlight-current-rowel-table-column fixed aligncenter propcreateTime label创建时间 width150/el-table-columnel-table-column proppowerFactor label功率因素 width aligncentertemplate slot-scopescopeel-input v-modelscope.row.powerFactor blurhandleBlur(scope.row) v-if scope.row.index tabRowIndex scope.column.index tabColumnIndex v-focus/el-inputdiv v-elsespan {{scope.row.powerFactor}}/span/div/template/el-table-columnel-table-column propselecttest label测试选择下拉 width aligncenter template slot-scopescopeel-select v-focus v-modelscope.row.selecttest v-if scope.row.index tabRowIndex scope.column.index tabColumnIndex changehandleBlur(scope.row) el-optionv-foritem in FloorsOptions:keyitem:labelitem:valueitem/el-option/el-selectdiv v-elsespan {{scope.row.selecttest}}/span/div/template/el-table-columnel-table-column propcheckboxtest label测试check width aligncenter template slot-scopescopeel-checkbox v-modelscope.row.checkboxtest v-if scope.row.index tabRowIndex scope.column.index tabColumnIndex changehandleBlur(scope.row) label复选框测试/el-checkboxdiv v-elsespan {{scope.row.checkboxtest}}/span/div/template/el-table-columnel-table-column propradiotest label测试radio width aligncenter template slot-scopescopeel-radio-group v-if scope.row.index tabRowIndex scope.column.index tabColumnIndex v-focus changehandleBlur(scope.row) v-modelscope.row.radiotest el-radio label男 男/el-radioel-radio label女 女/el-radio/el-radio-groupdiv v-elsespan {{scope.row.radiotest}}/span/div/template/el-table-column!-- 此处省略 --el-table-column label操作template slot-scopescopeel-button clickhandleRowEdit(scope.$index, scope.row)编辑/el-buttonel-button typedanger clickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column/el-tableel-pagination :current-pagepage :page-size10 current-changeCurrentChange stylemargin-top: 10px;display: flex;justify-content: center;align-items: center; background layoutprev, pager, next :totaltotal/el-pagination/div/div
/template
scriptexport default {directives: {//注册一个局部的自定义指令 v-focus输入框自动聚焦focus: {inserted: function (el) {el.querySelector(input).focus()}}},
data() {return {page: 1,tabRowIndex: null, //行角标tabColumnIndex: , //列角标limit: 10,total:0,FloorsOptions:[test1,test2,test3,test4,test5],tableData: [{createTime:2024-01-01,powerFactor:555,selecttest:test1,checkboxtest:false,radiotest:,setingFlag:false},{createTime:2024-02-01,powerFactor:66,selecttest:test2,checkboxtest:false,radiotest:,setingFlag:false},{createTime:2024-03-01,powerFactor:66,selecttest:test3,checkboxtest:false,radiotest:,setingFlag:false},{createTime:2024-04-01,powerFactor:66,selecttest:test4,checkboxtest:false,radiotest:,setingFlag:false},],}},
methods: {getCell(row, column, cell, event) {console.log(行的内容:,row);this.tabRowIndex row.indexthis.tabColumnIndex column.index},tableCellClassName({row, column, rowIndex, columnIndex}){//注意这里是解构//利用单元格的 className 的回调方法给行列索引赋值row.indexrowIndex;column.indexcolumnIndex;},handleBlur(row) {row.setingFlag false;const param{id:row.id,powerFactor:row.powerFactor,currentA:row.currentA,currentB:row.currentB,currentC:row.currentC,voltage:row.voltage,voltageA:row.voltageA,voltageB:row.voltageB,voltageC:row.voltageC,activePower:row.activePower,selecttest:row.selecttest,reactivePower:row.reactivePower,apparentPower:row.apparentPower,calculatedPowerFactor:row.calculatedPowerFactor,energyConsumption:row.energyConsumption}this.tabRowIndex null;this.tabColumnIndex null;console.log(handleBlur);console.log(param);},handleRowEdit(index ,row){this.$set(row, setingFlag, true)},handleDelete( index, row){console.log(index )console.log( row)},CurrentChange(){console.log(CurrentChange)},}
}
/script
