国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

iView 實(shí)現(xiàn)可編輯表格

lcodecorex / 1935人閱讀

摘要：組件實(shí)現(xiàn)方式記錄當(dāng)前需要編輯的列的，默認(rèn)為空需要編輯的列與當(dāng)前需要編輯的進(jìn)行匹配，成功則將該列渲染為包含標(biāo)簽組件，并綁定事件數(shù)據(jù)處理名稱班級(jí)操作編輯保存取消注意如果采用的是在標(biāo)簽中引入，該方法在項(xiàng)目中會(huì)失效通過(guò)編譯開發(fā)的項(xiàng)目

create at： 2019-02-20
組件

實(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: "名稱", 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("div", 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ò)編譯開發(fā)的項(xiàng)目可行；

歡迎交流 Github

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101870.html

相關(guān)文章

  • iView 發(fā)布后臺(tái)管理系統(tǒng) iview-admin，沒(méi)錯(cuò)，它就是你想要的

    摘要：簡(jiǎn)介是基于，搭配使用組件庫(kù)形成的一套后臺(tái)集成解決方案，由前端可視化團(tuán)隊(duì)部分成員開發(fā)維護(hù)。遵守設(shè)計(jì)和開發(fā)約定，風(fēng)格統(tǒng)一，設(shè)計(jì)考究，并且更多功能在不停開發(fā)中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 簡(jiǎn)介 iView Admin 是基于 Vue.js，搭配使用 iView UI 組件庫(kù)形成的一套后臺(tái)集成解...

    HackerShell 評(píng)論0 收藏0

  • iview Table表格組件無(wú)法拆分單元格的解決思路

    摘要：因?yàn)槲覀冺?xiàng)目中首要的是單元格拆分的，因此以拆分為例。使用函數(shù)對(duì)表格組件的表格列配置數(shù)據(jù)進(jìn)行動(dòng)態(tài)改造，普通單元格渲染標(biāo)簽呈現(xiàn)數(shù)據(jù)，要拆分的單元格渲染原生標(biāo)簽最后隱藏嵌套表格的邊框及調(diào)整相關(guān)原生表格樣式。 最近在開發(fā)的Vue項(xiàng)目中，使用了iview第三方UI庫(kù);對(duì)于表格組件的需求是最多的，但是在一些特定場(chǎng)景下，發(fā)現(xiàn)iview的表格組件沒(méi)有單元格合并與拆分的API，搜了一下發(fā)現(xiàn)很多同學(xué)提問(wèn)關(guān)...

    songze 評(píng)論0 收藏0

  • vue+iview 實(shí)現(xiàn)可編輯表格

    摘要：先簡(jiǎn)單說(shuō)明一下這個(gè)引入的的方式是標(biāo)簽引入的沒(méi)有用到之類的構(gòu)建工具畢竟公司還在用這也是我第一次寫文章大家看看思路就行了要是有大佬指點(diǎn)指點(diǎn)就更好了話不多說(shuō)先來(lái)個(gè)效果圖我們?cè)倏聪聵O為簡(jiǎn)單的目錄結(jié)構(gòu)實(shí)現(xiàn)的可編輯表格首頁(yè)首頁(yè)相關(guān)與業(yè)務(wù)無(wú)關(guān)的純工具函數(shù) 先簡(jiǎn)單說(shuō)明一下,這個(gè)Demo引入的vue,iview的方式是標(biāo)簽引入的,沒(méi)有用到webpack之類的構(gòu)建工具...畢竟公司還在用angularjs...

    Anleb 評(píng)論0 收藏0

  • VUE UI框架對(duì)比 element-ui 與 iView

    摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時(shí)，使用的是的函數(shù)，直接在中插入對(duì)應(yīng)模板表格分頁(yè)都需要引入分頁(yè)組件配合使用兩者總體比較，要比簡(jiǎn)潔許多。 element VS iview(最近項(xiàng)目UI框架在選型 ，做了個(gè)分析， 不帶有任何利益相關(guān)）主要從以下幾個(gè)方面來(lái)做對(duì)比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計(jì)師友...

    ZHAO_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<