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

Hey金子
  • 147

图片描述


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

回复
阅读 12.2k
6 个回答

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"

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

keleno
  • 4
新手上路,请多包涵

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

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

type = TableText 还是 TableInput
你说了算咯

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

不过也可以试试 h5的contenteditable

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏