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

Question

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.

Alessandro · Accepted Answer · 2017-12-15 09:09:25Z

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

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

edited Dec 15, 2017 at 9:09

answered Dec 15, 2017 at 9:03

Alessandro

4,4729 gold badges43 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gdaniel Over a year ago

I ran into the same issue as you, and came to the same conclusion, but my el-input-number step doesn't work when I bind the data from el-table. The number only increments once, and then stops reponding without any errors. If I switch the v-model to some other variable it works just fine, but it doesn't seem to be able to update the data in scope.row.myvar. Did you have any similar issues?

Alessandro Over a year ago

I'm sorry, I didn't have that issue... anyway could you create a new Question here on SO and share your code?

gdaniel Over a year ago

I figured out my issue... v-model and vuex.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related