iview的tabe中加入input、select、時間外掛和table的編輯、刪除操作
阿新 • • 發佈：2018-12-26
如圖，實現的目標table能有編輯的input、能選擇的下拉框、還有日期選擇器、最後的操作裡面可以點選編輯和刪除當前的行操作。
自己解說的，怕有些地方講的不好，放上demo的連結地址
對應的github的demo連結地址：https://github.com/fengliting/iviewtable
1、第一步html
<template> <div style="width:80%;margin:50px auto"> <Button @click="additem">新增</Button> <Table class="margin-top-20" :loading="loading" :columns="columns" :data="formList" size="small" ref="table" border ></Table> <footer style="text-align:right;margin-top:10px"> <Button type="primary" @click="submit">確定</Button> <Button @click="cancel">取消</Button> </footer> </div> </template>
2、第二步js程式碼
a、定義table的data，還有選擇的下拉框的option
data() { return { loading:false, datalist:[ { number:122333, carrier:'aaa', datatime:'2018-12-13 03:40:12' } ], Types:[ { value: 'hhh', name: 'hhh' }, { value: 'aaa', name: 'aaa' }, { value: 'cccc', name: 'cccc' }, { value: 'tytyty', name: 'tytyty' }, ], } },
b、把資料插入到table裡面，在插入資料前，有個注意點
1、一般從後端拿的data資料沒有給編輯的標記，需要前端自己加一個編輯標記號，後面點選編輯按鈕的時候用來切換是否展示編輯內容的
在獲取table的data資料的時候，應該要在裡面放入一個標記位，我是放$Edit，在使用編輯操作的時候，為true表示展示編輯內容操作，在table裡面的要用到這個標記位
created() { this.initdatalist() }, methods: { initdatalist(){ this.datalist.map(item=>{ item.$Edit = false; }) }, }
2、插入資料到table裡面，使用row.$Edit來標記展示的內容
computed:{
formList(){
return this.datalist || []
},
columns() {
const _this = this
return [
{
title: 'Number',
key: 'number',
render(h, { row,index }) {
if(row.$Edit){
return h('Input',{
props: {
size:'small',
value:row.number
},
on: {
'input':(event) => {
// console.log(event)
row.number = event
_this.datalist[index] = row
}
},
})
}else{
return <div>{row.number}</div>
}
}
}, {
title: 'Carrier',
key: 'carrier',
render(h, { row,index }) {
if(row.$Edit){
return h('Select',{
props:{
value: row.carrier,
},
on: {
'on-change':(value) => {
row.carrier = value
_this.datalist[index] = row
}
},
},
_this.Types.map((json)=>{
// console.log(json)
return h('Option', {
props: {
value: json.value
}
},json.name);
})
)
}else{
return <div>{row.carrier}</div>
}
}
}, {
title: '時間',
key: 'datatime',
width:220,
render(h, { row,index }) {
if(row.$Edit){
return h('DatePicker',{
props: {
type:'datetime',
placeholder:"Select date",
value:_this.datalist[index].datatime
},
on: {
'on-change':function(date){
_this.datalist[index].datatime = date
},
},
})
}else{
return <div>{row.datatime}</div>
}
}
},{
title: '操作',
width:140,
render(h, { row, index }) {
return h('div',[
h('Button', {
props:{
type:"primary",
size:'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
_this.changeEdit(row)
}
}
},'編輯'),
h('Button', {
props:{
type:"error",
size:'small'
},
on: {
click: () => {
_this.comremove(index)
}
}
},'刪除')
])
}
},]
},
},這裡面要注意的是input裡面的寫法。如果是以下的寫法，那麼會導致輸入input的時候，焦點會跳出
{
title: 'Number',
key: 'number',
render(h, { row,index }) {
if(row.$Edit){
return h('Input',{
props: {
size:'small',
value:_this.datalist[index].number
},
on: {
'input':(event) => {
_this.datalist[index].number = event
}
},
})
}else{
return <div>{row.number}</div>
}
}
}, 所以要進行修改，使用的是整行的替換，這個在github裡面也有解說，傳送連結：https://github.com/iview/iview/issues/1781
c、需要用到的方法
additem(){
let itemdata = {
number:null,
carrier:null,
datatime:null,
$Edit:true,
}
this.datalist.push(itemdata)
},
changeEdit(row){
this.$set(row, '$Edit', true)
},
comremove(index) {
this.datalist.splice(index, 1);
},到這裡，這個table的使用input、select、日期控制元件就成型了。如果看的不是很明白，可以自行下載demo操作。
demo連線地址：https://github.com/fengliting/iviewtable