javascript - Vue.js + 元素用户界面 : Content editable on el-table's rows

Question

我需要在使用 Element UI 编写的应用程序上使用可编辑的数据网格。
实际上，我有如下表格:

<el-table :data="myData" stripe="stripe">
    <el-table-column prop="col1" label="Col 1"></el-table-column>
    <el-table-column prop="col2" label="Col 2"></el-table-column>
</el-table>

这是在 html 中呈现的(简化):

<table class="el-table__body">
    <td class="el-table_1_column_1">
        <div class="cell">Val col 1</div>
    </td>
    <td class="el-table_1_column_1">
        <div class="cell">Val col 1</div>
    </td>
</table>

因此，我想将属性 contenteditable="true" 附加到带有 class="cell" 的 div。
我尝试将该属性附加到 el-table-column 元素，但没有成功。

<el-table-column prop="position" label="Pos." contenteditable="true"></el-table-column>

那么，我怎样才能使一些 el-table 的单元格可编辑？
contenteditable 属性是否正确？我该如何使用它？

谢谢。

Answer 1

好吧，我解决了在任何列中添加一个 template 的问题，每个列都可以访问父 scope 指定属性 slot-scope="scope"。这样，内部输入就可以以每一行的列为界。

然后，我实现了如下表格:

<el-table :data="myData" stripe="stripe">
    <el-table-column prop="col1" label="Col 1">
        <template slot-scope="scope">
            <el-input-number v-model="scope.row.col1" :min="1" :max="99" size="small" controls-position="right" />
        </template>
    </el-table-column>
    <el-table-column prop="col2" label="Col 2"></el-table-column>
</el-table>

在上面的代码中，col1 通过属性 v-model 与 col1 上的数据源表 myData 绑定(bind)="scope.row.col1".

显然，您可以在模板中插入任何您需要的内容:el-input、el-input-number 甚至自定义组件。

注意:您可以选择将某些列设置为可编辑，如上例所示(第二列不可编辑)。