第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

Element UI的表格雙擊之后可編輯,怎么做?

Element UI的表格雙擊之后可編輯,怎么做?

狐的傳說 2019-03-12 17:23:14
我頁面加載出來之后,會(huì)有一個(gè)排序序號(hào).我雙擊當(dāng)前的一行,排序序號(hào)會(huì)變?yōu)榭删庉嫚顟B(tài),失去焦點(diǎn)之后,會(huì)保存.怎么做?我能拿到當(dāng)前的那一行的id,但是當(dāng)前哪行怎么編輯.我的代碼                <el-table-column prop="orderCount" label="排序序號(hào)">                    <template slot-scope="scope">                        <div  @click="chengenum(scope.$index)">                        <span class='abc'>{{scope.row.orderCount}}</span>                        <el-input v-show="editable" v-model='grade'></el-input>                        </div>                    </template>                </el-table-column>                                editable:false,//這是我的顯示隱藏的變量            chengenum(row){ //我的方法                console.log(row)                this.editable = true;            },
查看完整描述

4 回答

?
慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊

經(jīng)過我公司的大牛指導(dǎo),寫出來了.但是好像不是太懂.我代碼給各位


                <el-table-column prop="orderCount" label="排序序號(hào)">

                    <template slot-scope="{row,$index}">

                        <div  @click="{{chengenum($index)}}">

                        <el-input v-if="editable[$index]" v-model='grade'></el-input>

                        <span v-else>{{row.orderCount}}</span>

                        </div>

                    </template>

                </el-table-column>

                //這是上面的靜態(tài)


                            let arr = _this.tableData = list_date.list; //這個(gè)_this.tableData是請(qǐng)求數(shù)據(jù)過來之后要渲染的列表

                            let len = arr.length;

                            

                            new Array(len)

                            

                            _this.editable = new Array(len);

//                            _this.editabl這個(gè)是控制顯示隱藏的量

data(){

editable:[],

}

//這是方法

            chengenum(row){

                this.editable[row] = true;

                this.$set(this.editable,row,true)

            },


查看完整回答
反對(duì) 回復(fù) 2019-03-28
?
縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗(yàn) 獲得超4個(gè)贊

 <span class='abc' @click=“setEdit($event)”>{{scope.row.orderCount}}</span>

setEdit(event){

    let target=event.target;

   //設(shè)置target的contenteditable屬性為true，

并添加target的blur事件監(jiān)聽用于更新它的值

}


查看完整回答
反對(duì) 回復(fù) 2019-03-28
?
偶然的你

TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

一個(gè)布爾值來控制他是否可編輯就行了


查看完整回答
反對(duì) 回復(fù) 2019-03-28
?
梵蒂岡之花

TA貢獻(xiàn)1900條經(jīng)驗(yàn) 獲得超5個(gè)贊

這個(gè)基于 ElementUI 的封裝組件可編輯表格應(yīng)該可以解決你的需求，可以參考這里 github


查看完整回答
反對(duì) 回復(fù) 2019-03-28
  • 4 回答
  • 0 關(guān)注
  • 6707 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)