之前看别人加了
@input.native="change($event, index)"
change(e, index) {
console.log('e', e, e.target.value);
// this.tableColumns[index].fieldName = e;
let obj = Object.assign({}, obj, { fieldName: e.target.value });
this.$set(this.tableColumns, index, obj);
this.$forceUpdate();
}
但其实并不需要，只需要在template的slot="header"后面加里面加：slot-scope="scope"
如下代码：
<el-table :data="tableData" style="width: 100%">
<el-table-column
v-for="(column, index) in tableColumns"
:prop="column.fieldName"
:key="column.id"
min-width="100"
>
<template slot="header" slot-scope="scope">
<div class="header-title">
<label>{{ column.fieldRemarks }}</label>
<el-popover>
<el-form :model="column" :rules="rules">
<el-form-item label="字段英文名（不可修改）" prop="fieldName">
<el-input v-model="column.fieldName"></el-input>
</el-form-item>
<!-- @input.native="change($event, index)" -->
<el-form-item label="字段标题" prop="fieldRemarks">
<el-input v-model="column.fieldRemarks"></el-input>
</el-form-item>
<el-form-item label="字段类型" prop="fieldType">
<el-select v-model="column.fieldType">
<el-option
v-for="item in fieldTypeOption"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div
class="icon-con"
slot="reference"
@click="handleEdit(index, column.ifEdit)"
>
<i class="el-icon-arrow-down" v-if="column.ifEdit"></i>
<i class="el-icon-arrow-up" v-else></i>
</div>
</el-popover>
</div>
</template>
<template slot-scope="scope">
<el-input v-model="scope.row[column.fieldName]"></el-input>
</template>
</el-table-column>
<el-table-column>
<template slot="header">
<el-button
v-no-more-click
type="text"
class="el-icon-plus"
@click="addColumn"
></el-button>
</template>
</el-table-column>
</el-table>