iview表格可编辑<!DOCTYPE html> <html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="unpkg/iview/dist/styles/iview.css">
<script type="text/javascript" src="/js/vue.min.js"></script>
<script type="text/javascript" src="unpkg/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
玛莎 努斯鲍姆<i-table border :columns="columns2" :data="data3"></i-table>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
columns2: [
width: 60,
align: 'center',
render: (h, params) => {
return h('Checkbox', {
props: {
value: w.$isEdit,
},
on: {
'on-change': function (state) {
console.log(state);
//不⽤iview table⾃带的CheckBox ⾃⼰重构⼀个点击赋值
纪新刚}
}
});
}
},
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age',
render: (h, params) => {
if (w.$isEdit) {
return h('input', {
domProps: {
value: w.age
},
on: {
input: function (event) {
}
}
});
} else {
return h('div', w.age);
}
}
},
{
title: 'Address',
key: 'address'
平安好房网
},
{
title: 'Action',
风咳
key: 'action',
render: (h, params) => {
return h('Button', {
props: {
type: 'text',
size: 'small'
},
on: {
click: () => {
if (w.$isEdit) {
this.w) } else {
this.w)
}
}
}
}, w.$isEdit ? '保存' : '编辑') }
}
],
data3: [
{
name: '哈哈',
age: 18,
address: '上海',
$isEdit: false
},
{
name: '啦啦',
age: 24,
address: '北京',
$isEdit: false
}
]
}
},蒋毅君 清华大学
methods: {
// select_row(selection,index){
// console.log('select_row',selection,index)
// this.$set(this.data3[index], '$isEdit', true)
// },
handleEdit (row) {
console.log('handleEdit',row);
this.$set(row, '$isEdit', true)
},
handleSave (row) {
console.log('handleSave',row);
this.$set(row, '$isEdit', false)
}
}
})
</script>
</body>
</html>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议