|
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
// 无痕刷新示例
export default {
name: 'SocketReload',
data() {
return {
loading: false,
dataSource: [],
columns: [
{key: 'num', title: '序号', width: '80px'},
{key: 'ship_name', title: '船名', width: '180px', type: JVXETypes.input},
{key: 'call', title: '呼叫', width: '80px', type: JVXETypes.input},
{key: 'len', title: '长', width: '80px', type: JVXETypes.input},
{key: 'ton', title: '吨', width: '120px', type: JVXETypes.input},
{key: 'payer', title: '付款方', width: '120px', type: JVXETypes.input},
{key: 'count', title: '数', width: '40px'},
{key: 'company', title: '公司', minWidth: '180px', type: JVXETypes.input},
{key: 'trend', title: '动向', width: '120px', type: JVXETypes.input},
],
// 查询url地址
url: {
getData: '/mock/vxe/getData',
|
|
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
// 是否启用日历刷新效果
reloadEffect: false,
}
},
created() {
this.loadData()
},
methods: {
// 加载数据
loadData() {
let formData = {pageNo: 1, pageSize: 200}
this.loading = true
getAction(this.url.getData, formData).then(res => {
if (res.success) {
this.dataSource = res.result.records
} else {
this.$error({title: '主表查询失败', content: res.message})
|
|
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
// 单元格编辑完成之后触发的事件
handleEditClosed(event) {
let {$table, row, column} = event
let field = column.property
let cellValue = row[field]
// 判断单元格值是否被修改
if ($table.isUpdateByRow(row, field)) {
// 校验当前行
$table.validate(row).then((errMap) => {
// 校验通过
if (!errMap) {
// 【模拟保存】(此处需要替换成真实的请求)
let hideLoading = this.$message.loading(`正在保存"${column.title}"`, 0)
setTimeout(() => {
hideLoading()
this.$message.success(`"${column.title}"保存成功!`)
// 局部更新单元格为已保存状态
$table.reloadRow(row, null, field)
// 发送更新消息
this.$refs.table.socketSendUpdateRow(row)
}, 555)
}
})
}
|