网站群系统破解版,网站和推广在一家做的好处,网站建设方案内容,动漫设计与制作学什么课程使用 el-table 和 el-table-column 创建表格。在单元格的默认插槽中#xff0c;使用 div 显示文本内容#xff0c;单击时触发编辑功能。使用 el-input 组件在单元格中显示编辑框。data() 方法中定义了 tableData#xff0c;tabClickIndex: null,tabClickLabel: ,用于判断是否… 使用 el-table 和 el-table-column 创建表格。在单元格的默认插槽中使用 div 显示文本内容单击时触发编辑功能。使用 el-input 组件在单元格中显示编辑框。data() 方法中定义了 tableDatatabClickIndex: null,tabClickLabel: ,用于判断是否处于编辑转态cell-clicktabClick 方法用于将单元格设置为编辑状态并使用 this.$nextTick 来确保输入框能获得焦点。通过blur监听失去焦点。 templatedivel-table :datadataDetail :row-class-nametableRowClassName border stylewidth: 100% max-height500px cell-clicktabClickel-table-column proptest1 labeltest1 aligncentertemplate slot-scopescopespan v-ifscope.row.index tabClickIndex tabClickLabel test1el-input :reftest1scope.row.id v-modelscope.row.test1 maxlength300 placeholder请输入test1 sizemini blurinputBlur //spanspan v-else{{ scope.row.test1 }}/span/template/el-table-columnel-table-column proptest2 labeltest2 width120px aligncentertemplate slot-scopescopespan v-ifscope.row.index tabClickIndex tabClickLabel test2el-input :reftest2scope.row.id v-modelscope.row.test2 :blurinputBlur placeholder请输入test2 sizemini blurinputBlur //spanspan v-else{{ scope.row.test2 | fmoney }}/span/template/el-table-columnel-table-column proptest3 labeltest3 aligncenter width180template slot-scopescopespan v-ifscope.row.index tabClickIndex tabClickLabel test3el-input :reftest3scope.row.id v-modelscope.row.test3 maxlength300 placeholder请输入test3 sizemini blurinputBlur //spanspan v-else{{ scope.row.test3 }}/span/template/el-table-column/el-table/div/templatescript
export default {data () {return {tabClickIndex: null, // 点击的单元格tabClickLabel: , // 当前点击的列名dataDetail: [{ id: 123, test1: sss }, { id: 456, test1: sss }]}},methods: {tableRowClassName ({ row, rowIndex }) {row.index rowIndex},tabClick (row, column, cell, event) {switch (column.label) {case test1:this.tabClickIndex row.indexthis.tabClickLabel column.labelbreakcase test2:this.tabClickIndex row.indexthis.tabClickLabel column.labelbreakcase test3:this.tabClickIndex row.indexthis.tabClickLabel column.labelbreakdefault: return}const key this.tabClickLabel row.idthis.$nextTick(() {this.$refs[key].focus()})},inputBlur (row, event, column) {this.tabClickIndex nullthis.tabClickLabel },}
}
/scriptstyle
/style
