完整html内容
<!-- 表格 --><el-table class="table"stripeborder:header-row-style="{'font-size':'14px',padding:'0px'}":row-style="{'font-size':'14px',padding:'0px',height:'30px'}":cell-style="{padding:'0px'}"v-if="deliverGoodsruleForm.state==1"@cell-click="cellClick":row-class-name="tableRowClassName":cell-class-name="tableCellClassName":data="deliverStateList"highlight-current-rowstyle="width: 100%"><el-table-column v-for="(val, i) in shipStatusList":fixed="i == 0":key="i":label="val.name":min-width="val.w"align="center"><template slot-scope="scope"><div v-if="scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label == '可发货数量'"class='inputnum'><el-input v-model="scope.row[val.value]"ref='editInput'type="number"size="mini"@blur="inputBlur(scope)" /></div><div class="inputnum"v-else>{{scope.row[val.value] }}</div></template></el-table-column></el-table>
data中定义内容
rowIndex: -1, //行索引columnIndex: -1, //列索引currentPage: 1,pageSize: 10,total: 0,theadList: [{name: '合同编号', value: 'contractNo', w: '110' },{name: '合同简码', value: 'contractShortCode', w: '100' },{name: '订单号', value: 'purchaseOrderCode', w: '100' },{name: '业主单位', value: 'ownerUnitName', w: '170' },{name: '物料编码', value: 'materialCode', w: '100' },{name: '物料名称', value: 'materialName', w: '150' },{name: '物料描述', value: 'materialDescription', w: '100' },{name: '供应商名称', value: 'supplierName', w: '180' },{name: '订单数量', value: 'orderQuantity', w: '100' },{name: '提单数量', value: 'totalLadingNumber', w: '80' },{name: '在途数量', value: 'transitQuantity', w: '80' },{name: '到厂数量', value: 'arrivalsQuantity', w: '80' },{name: '未发货数量', value: 'unShippedQuantity', w: '100' },{name: '发货状态', value: 'deliveryStatusStr', w: '80' },{name: '可发货数量', value: 'shippedQuantity', w: '100' },{name: '到港时间', value: 'toPortDate', w: '170' },{name: '订单状态', value: 'orderStatusStr', w: '100' },{name: '要求供货日期', value: 'requestDeliveryDate', w: '160' },{name: '订单完成日期', value: 'orderCompletionDate', w: '160' },{name: '交货地址', value: 'deliveryAddress', w: '100' },],dataList: [{createTime: "-02-23 17:30:13"createUserCode: "80600096"delFlag: 0email: "xxo@yh-"forwarderShippedQuantity: 69id: "1364145528022151170"legalName: "申xx"name: "湖南xxxx科技有限公司"orderId: "1364144342464376834"sapCode: "80xx74"status: "2"statusName: "正式供应商"telNumber: "136xxxxx154"transportWay: 1transportWayStr: "铁路运输"updateTime: "-02-25 14:10:00"updateUserCode: "801xx293"}{createTime: "-02-23 17:30:17"createUserCode: "80600096"delFlag: 0email: "zhongyuxian@"forwarderShippedQuantity: 88.88id: "1364145545109745665"legalName: "梁x"name: "柳州xxxx有限公司"orderId: "1364144342464376834"sapCode: "802966"status: "2"statusName: "正式供应商"telNumber: "134xxxxx698"transportWay: 2transportWayStr: "水路运输"updateTime: "-02-25 14:10:00"updateUserCode: "801xxx93"}],
js内容根据需求可自行调整
methods: {//把每一行的索引加到行数据中tableRowClassName({row, rowIndex }) {row.index = rowIndex},//把每一列的索引加到列数据中tableCellClassName({column, columnIndex }) {column.index = columnIndex},//单元格被点击时会触发该事件cellClick(row, column, cell, event) {// console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)if (column.label == '可发货数量') {this.rowIndex = row.indexthis.columnIndex = column.indexthis.$nextTick(() => {this.$refs['editInput'][0].focus()//没有没有自动聚焦效果的话可能是这里出现问题 需要打印出来看一下//console.log(this.$refs['editInput'])})}},//输入框失去焦点事件（初始化中间变量）inputBlur(scope) {this.rowIndex = -1this.columnIndex = -1},}
