資訊專欄INFORMATION COLUMN
摘要：組件實(shí)現(xiàn)方式記錄當(dāng)前需要編輯的列的，默認(rèn)為空需要編輯的列與當(dāng)前需要編輯的進(jìn)行匹配，成功則將該列渲染為包含標(biāo)簽組件，并綁定事件數(shù)據(jù)處理名稱班級操作編輯保存取消注意如果采用的是在標(biāo)簽中引入，該方法在項(xiàng)目中會失效通過編譯開發(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: "班級",
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)目中會失效；通過編譯開發(fā)的項(xiàng)目可行；
歡迎交流 Github
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101870.html
摘要：簡介是基于，搭配使用組件庫形成的一套后臺集成解決方案，由前端可視化團(tuán)隊(duì)部分成員開發(fā)維護(hù)。遵守設(shè)計(jì)和開發(fā)約定，風(fēng)格統(tǒng)一，設(shè)計(jì)考究，并且更多功能在不停開發(fā)中。 showImg(https://segmentfault.com/img/remote/1460000011603206); 簡介 iView Admin 是基于 Vue.js，搭配使用 iView UI 組件庫形成的一套后臺集成解...
摘要：因?yàn)槲覀冺?xiàng)目中首要的是單元格拆分的，因此以拆分為例。使用函數(shù)對表格組件的表格列配置數(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庫;對于表格組件的需求是最多的，但是在一些特定場景下，發(fā)現(xiàn)iview的表格組件沒有單元格合并與拆分的API，搜了一下發(fā)現(xiàn)很多同學(xué)提問關(guān)...
摘要：先簡單說明一下這個(gè)引入的的方式是標(biāo)簽引入的沒有用到之類的構(gòu)建工具畢竟公司還在用這也是我第一次寫文章大家看看思路就行了要是有大佬指點(diǎn)指點(diǎn)就更好了話不多說先來個(gè)效果圖我們再看下極為簡單的目錄結(jié)構(gòu)實(shí)現(xiàn)的可編輯表格首頁首頁相關(guān)與業(yè)務(wù)無關(guān)的純工具函數(shù) 先簡單說明一下,這個(gè)Demo引入的vue,iview的方式是標(biāo)簽引入的,沒有用到webpack之類的構(gòu)建工具...畢竟公司還在用angularjs...
摘要：而則是用到到指令結(jié)合的方式去生成，批量生成元素。表格操作列自定義渲染的時(shí)，使用的是的函數(shù)，直接在中插入對應(yīng)模板表格分頁都需要引入分頁組件配合使用兩者總體比較，要比簡潔許多。 element VS iview(最近項(xiàng)目UI框架在選型 ，做了個(gè)分析， 不帶有任何利益相關(guān)）主要從以下幾個(gè)方面來做對比使用率（npm 平均下載頻率，組件數(shù)量，star, issue…)API風(fēng)格打包優(yōu)化與設(shè)計(jì)師友...
閱讀 494·2019-08-30 15:44
閱讀 906·2019-08-30 10:55
閱讀 2742·2019-08-29 15:16
閱讀 953·2019-08-29 13:17
閱讀 2814·2019-08-26 13:27
閱讀 582·2019-08-26 11:53
閱讀 2132·2019-08-23 18:31
閱讀 1899·2019-08-23 18:23
