Vue.js + 元素 UI：el-table 行上的内容 editable

Question

我需要在使用 Element UI.[=33 编写的应用程序上使用 editable datagrid =] 实际上，我有一个 table 如下所示：

<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 的单元格 editable?
contenteditable 属性是否正确？我该如何使用它？

谢谢。

Answer 1

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

然后，我实现了我的 table，如下所示：

<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="scope.row.col1".[=20] 与 col1 上的数据源 table myData 绑定=]

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

注意：您可以选择让editable只是一些列，正如您在上面的例子中看到的（第二列不是editable）。

Vue.js + 元素 UI：el-table 行上的内容 editable

Vue.js + Element UI: Content editable on el-table's rows

javascript

html

vue.js

vuejs2

element-ui