html的表格变成输入框,element+vue表格点击变成输入框（可编辑状态）

完整html内容

stripe

border

:data="dataList"

@cell-click="tabClick"

:row-class-name="tableRowClassName"

:cell-class-name="tableCellClassName"

style="width: 100%">

:fixed="i == 0"

:key="i"

:label="val.name"

:min-width="val.w"

align="center">

@blur="inputBlur(scope)" />

{{ scope.row[val.value] }}

align="center"

label="操作"

width="180">

type="text">查看物资详情

type="text">完成订单

:page-sizes="[10, 30, 50]"

:page-size="pageSize"

layout="total, sizes, prev, pager, next, jumper"

:total="total"

@size-change="handleSizeChange"

@current-change="handleCurrentChange" />

data中定义内容

rowIndex: -1, //行索引

columnIndex: -1, //列索引

currentPage: 1,

pageSize: 10,

total: 0,

theadList: [

{ name: '合同编号', value: 'contractNum', w: '10%' },

{ name: '订单号', value: 'orderNum', w: '15%' },

{ name: '业主单位', value: 'owner', w: '10%' },

{ name: '采购部门', value: 'purchasing', w: '10%' },

{ name: '订单状态', value: 'status', w: '10%' },

{ name: '要求供货日期', value: 'supplyDate', w: '15%' },

{ name: '订单完成日期', value: 'finishDate', w: '15%' },

{ name: '交货地址', value: 'deliveryAddress', w: '15%' },

],

dataList: [

{

id: 4500000469,

businessesId: 4500000469,

contractNum: '20160502',

orderNum: '20160502',

owner: '金沙',

purchasing: '事业部',

status: '1',

supplyDate: '2016-05-02',

finishDate: '2016-05-03',

deliveryAddress: '上海市普陀区金沙江路 1518 弄',

},

{

id: 4500000503,

businessesId: 4500000503,

contractNum: '20160503',

orderNum: '20160503',

owner: '金沙',

purchasing: '事业部',

status: '4',

supplyDate: '2016-06-02',

finishDate: '2016-06-03',

deliveryAddress: '上海市普陀区金沙江路 1518 弄',

},

],

js内容根据需求可自行调整

methods: {

//把每一行的索引加到行数据中

tableRowClassName({ row, rowIndex }) {

row.index = rowIndex

},

//把每一列的索引加到列数据中

tableCellClassName({ column, columnIndex }) {

column.index = columnIndex

},

//单元格被点击时会触发该事件

tabClick(row, column, cell, event) {

console.log(row, '单条数据', column, '列信息', cell, 'td实例', event)

this.rowIndex = row.index

this.columnIndex = column.index

},

//输入框失去焦点事件(初始化中间变量)

inputBlur(scope) {

this.rowIndex = -1

this.columnIndex = -1

},

}

标签：vue,name,columnIndex,column,value,element,输入框,rowIndex,row

来源： https://blog.csdn.net/weixin_49866029/article/details/112792794