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

admin管理员组

文章数量:1394099

I need an editable datagrid on an application written with Element UI.
Actually, I've a table like the following:

<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>

That's rendered in html like (simplifying):

<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>

So, I'd like to append the attribute contenteditable="true" to the div with class="cell".
I tried to append the attribute to the el-table-column element, but it didn't works.

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

Then, how could I make some el-table's cell editable?
Is the contenteditable attribute the right way? How can I use it?

Thanks.

I need an editable datagrid on an application written with Element UI.
Actually, I've a table like the following:

<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>

That's rendered in html like (simplifying):

<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>

So, I'd like to append the attribute contenteditable="true" to the div with class="cell".
I tried to append the attribute to the el-table-column element, but it didn't works.

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

Then, how could I make some el-table's cell editable?
Is the contenteditable attribute the right way? How can I use it?

Thanks.

• javascript
• html
• vue.js
• vuejs2
• element-ui

Share Improve this question Follow edited Dec 13, 2017 at 13:32 Alessandro asked Dec 13, 2017 at 12:05 AlessandroAlessandro 4,47299 gold badges4242 silver badges7171 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Well, I solved adding a template inside any column, each one can access to the parent scope specifying the attribute slot-scope="scope". In this way, the inner input can be bounded with the column of each row.

Then, I've implemented my table like following:

<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>

In the above code, the col1 is bounded with the datasource's table myData on col1, through the attribute v-model="scope.row.col1".

Obviously, in the template you can insert anything you need: el-input, el-input-number or even custom ponents.

Note: You can choose to make editable just some columns, as you can see in the above example (the second column is not editable).

本文标签： javascriptVuejsElement UI Content editable on eltable39s rowsStack Overflow