版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/flting1017/article/details/85257815
如图，实现的目标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操作。