1

我需要一个使用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"到 div 中class="cell"。
我试图将属性附加到el-table-column元素，但它不起作用。

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

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

谢谢。

4

1 回答 1

3

好吧，我解决了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与数据源的表绑定。myDatacol1v-model="scope.row.col1"

显然，在模板中你可以插入任何你需要的东西：el-input，el-input-number甚至是自定义组件。

注意：您可以选择仅使某些列可编辑，如上例所示（第二列不可编辑）。

于 2017-12-15T09:03:51.643 回答