vue+element怎么实现表格内编辑

Question

---

如图所示，我想使用element-ui实现一个这样表格中编辑的功能，还请给个思路，谢谢！

Answer 1

双击单元格编辑
预览：https://jsfiddle.net/bgfxv3eu/

Answer 2

el-table-column就不要prop了在其里面写
<template slot-scope="props">
</template>
然后通过scope.row.XXX拿到表格里的东西，
写个span 和input 两个的v-show相反，点击编辑时让show取反就ok了，
大致是

<el-table-column  label="具体需求">
    <template slot-scope="scope">
        <div class="content-rowspan">
            <div v-for="(list,index) in scope.row.lists">
                <p v-show="scope.row.show">
                    {{list}}                                                       
                    <el-button  class="delelist" type="danger" size="small"  @click="delelist(tableData1,scope.$index,index)">删除</el-button>
                </p>
                <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-show="!scope.row.show" v-model="scope.row.lists[index]"></el-input>
            </div>            
            <div><el-button  size="small" type="primary" icon="plus" @click="addlist(tableData1,scope.$index)"></el-button></div>
        </div>
    </template>
</el-table-column>

低版本的是scope="scope"

Answer 3

给你提供一个思路，你看能不能理解：
1、在每个需要点击可编辑的列里面都放置一个和那个列宽高都相等，且样式都一样的input输入框
2、使用v-if和v-else来控制input和span(我把绑定内容并显示想象成用span包含的)
3、让input的v-model和span绑定值是同一个，再定义一个变量来控制input和span的显示隐藏切换
4、当点击span的时候，span隐藏，input显示，这时显示的内容因为是和span绑定的内容一致的，所以更改会实时生效，不用事件去控制
5、当input失去焦点或者用户按下enter键时，input隐藏span显示

Answer 4

思路都差不多，不过我是把它弄成一个组件，v-show的参数就跟据自己组件里的数据模型变，这样就不会造成你说的一行都变成输入框了。主要是如果输入框太多了，还要分别配置是否可见的参数太麻烦

Answer 5

我给个超简单的思路，Vue有个神奇组件叫做<component> 动态组件
<component :is="type"></component>

type = TableText 还是 TableInput
你说了算咯

Answer 6

我的想法跟楼上差不多,每个单元格放一个 input, 点击 show, 编辑完回车 hide

不过也可以试试 h5的contenteditable