vue+element怎么實現(xiàn)表格內(nèi)編輯

圖片描述

如圖所示，我想使用element-ui實現(xiàn)一個這樣表格中編輯的功能，還請給個思路，謝謝！

回答

編輯回答

萌二代

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"

2017年7月20日 17:27

編輯回答

不討喜

思路都差不多，不過我是把它弄成一個組件，v-show的參數(shù)就跟據(jù)自己組件里的數(shù)據(jù)模型變，這樣就不會造成你說的一行都變成輸入框了。主要是如果輸入框太多了，還要分別配置是否可見的參數(shù)太麻煩

2018年5月29日 23:35

編輯回答

溫衫

我的想法跟樓上差不多,每個單元格放一個 input, 點擊 show, 編輯完回車 hide

不過也可以試試 h5的contenteditable

2017年4月22日 07:31

編輯回答

壞脾滊

我給個超簡單的思路，Vue有個神奇組件叫做<component> 動態(tài)組件
<component :is="type"></component>

type = TableText 還是 TableInput
你說了算咯

2017年6月27日 22:42

編輯回答

野橘

給你提供一個思路，你看能不能理解：
1、在每個需要點擊可編輯的列里面都放置一個和那個列寬高都相等，且樣式都一樣的input輸入框
2、使用v-if和v-else來控制input和span(我把綁定內(nèi)容并顯示想象成用span包含的)
3、讓input的v-model和span綁定值是同一個，再定義一個變量來控制input和span的顯示隱藏切換
4、當(dāng)點擊span的時候，span隱藏，input顯示，這時顯示的內(nèi)容因為是和span綁定的內(nèi)容一致的，所以更改會實時生效，不用事件去控制
5、當(dāng)input失去焦點或者用戶按下enter鍵時，input隱藏span顯示