iView如何實(shí)現(xiàn)可編輯表格的方法

這篇文章將為大家詳細(xì)講解有關(guān)iView如何實(shí)現(xiàn)可編輯表格的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動(dòng)大帶寬，多線BGP大帶寬租用,是為眾多客戶(hù)提供專(zhuān)業(yè)雅安機(jī)房托管報(bào)價(jià)，主機(jī)托管價(jià)格性?xún)r(jià)比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專(zhuān)業(yè)成都idc公司。

組件

<i-table highlight-row ref="currentRowTable" :columns="columns" :data="tableData"></i-table>

實(shí)現(xiàn)方式：

  • 記錄當(dāng)前需要編輯的列的id，默認(rèn)為空

  • 需要編輯的列與當(dāng)前需要編輯的id進(jìn)行匹配，成功則將該列渲染為包含input標(biāo)簽組件，并綁定input事件

數(shù)據(jù)處理

export default {
    data () {
        return {
            currentId: '',
            currentScore: '',
            columns: [
                { title: '名稱(chēng)', key: 'name', align: 'center' },
                {
                title: '班級(jí)',
                align: 'center',
                render: (h, p) => {
                    const { id, score } = p.row
                    const inp = h('input', {
                    style: {
                        width: '30%',
                        padding: '4px 2px',
                        borderRadius: '4px',
                        border: '1px solid #e9eaec',
                        textAlign: 'center'
                    },
                    attrs: {
                        maxlength: 16
                    },
                    domProps: {
                        value: score
                    },
                    on: {
                            input: (event) => {
                            this.currentScore = event.target.value
                        }
                    }
                    })
                    return this.currentId === p.row.id ? inp : h('span', score)
                }
                },
                {
                title: '操作',
                align: 'center',
                render: (h, p) => {
                    const { currentId } = this
                    const { id } = p.row
                    const btnEdit = h('i-button', {
                    on: {
                        click: () => {
                            this.currentId = id
                        }
                    }
                    }, '編輯')

                    const btnSaveCancel = [
                        h('i-button', {
                            on: {
                            click: () => {
                                this.handleSave(id)
                            }
                            }
                        }, '保存'),
                        h('i-button', {
                            on: {
                            click: () => {
                                this.currentId = ''
                                this.currentScore = ''
                            }
                            }
                        }, '取消')]
                    return currentId === id ? h('p', btnSaveCancel) : btnEdit
                }
                }
            ],
            tableData: [
                { id: 1, name: 1, score: 1 },
                { id: 2, name: 2, score: 2 }]
        }
    },

    methods: {
        handleSave (id) {
            const {currentScore, tableData} = this
            this.tableData = tableData.map(v => {
                return v.id === id ? { ...v, score: currentScore } : v
            })
            this.currentId = ''
            this.currentScore = ''
        }
    }
}

注意： 如果采用的是在 head 標(biāo)簽中引入 iView，該方法在項(xiàng)目中會(huì)失效；通過(guò)編譯開(kāi)發(fā)的項(xiàng)目可行；

關(guān)于iView如何實(shí)現(xiàn)可編輯表格的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站欄目：iView如何實(shí)現(xiàn)可編輯表格的方法
標(biāo)題URL：http://bm7419.com/article26/geggjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站