iview可编辑表格的实现
程序员文章站
2022-06-08 17:13:07
...
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<Card slot="content">
<i-table ref="tables" border :columns="columns" :data="data">
<template slot="selectRow" slot-scope="props">
<Select
filterable
remote
:remote-method="remoteMethod"
:value="props.row.approval" >
<Option v-for="item in approvalList" :value="item">{{ item }}</Option>
</Select>
</template>
</i-table>
</Card>
</div>
<script>
var app = new Vue({
el: '#app',
data () {
return {
list: [],
approvalList:['aa', 'bb'],
query:'',
index:-1,
columns: [
{title: '服务器名', key: 'hostname', sortable: true},
{title: 'IP', key: 'ip', sortable: true},
{
title: '审批人',
key: 'approval',
render: (h, params) => {
if (params.row.$isEdit) {
return h('div',
this.$refs.tables.$scopedSlots.selectRow({
row: params.row,
index: params.index
})
)
} else {
return h('div', params.row.approval);
}
}
},
{title: '管理人', key: 'administrator'},
{title: '部门主管', key: 'leader'},
{
title: '操作',
key: 'operate',
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
if (params.row.$isEdit) {
this.handleSave(params.row, params.index)
} else {
this.handleEdit(params.row, params.index)
}
}
}
}, params.row.$isEdit ? '保存' : '审批人编辑'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.accountManage(params.index)
}
}
}, '账号管理'),
])
}
}
],
data: [
{
hostname: 'num01',
ip: '18.22.33.44',
status: '已有密码',
approval: '张一',
administrator: '张二',
leader: '张三'
}, {
hostname: 'num02',
ip: '28.22.33.44',
status: '已有密码',
approval: '李一',
administrator: '李二',
leader: '李三'
}, {
hostname: 'num03',
ip: '38.22.33.44',
status: '已有密码',
approval: '王一',
administrator: '王二',
leader: '王三'
}
]
}
},
methods: {
handleEdit (row, index) {
if(this.index == -1 || index === this.index){
this.index = index
this.$set(row, '$isEdit', true)
}else{
this.$Message.error("您还有未保存的审批人")
}
},
handleSave (row, index) {
this.index = -1
this.$set(row, '$isEdit', false)
this.data[index].approval = this.query
console.log(this.data[index].approval);
console.log(this.data[index].ip);
},
// 数据更改时查询
remoteMethod2 (query) {
console.log(query);
this.query = query
// getServerManageApprovalList(query).then(res => {
// this.approvalList = res.data.approval_list
// })
},
}
})
</script>
</body>
</html>
上一篇： element可编辑表格验证失效问题