Skip to content

Commit d9b270b

Browse files
cq-pandacq-panda
committed
增加el-table的点击行事件添加到扩展方法中
1 parent 45df07b commit d9b270b

File tree

9 files changed

+223
-185
lines changed

9 files changed

+223
-185
lines changed

‎Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
@loadBefore="loadInternalDetailTableBefore"
179179
@loadAfter="loadDetailTableAfter"
180180
@rowChange="detailRowOnChange"
181+
@rowClick="detailRowOnClick"
181182
:url="detailOptions.url"
182183
:index="detailOptions.edit"
183184
:tableData="detailOptions.data"
@@ -229,6 +230,7 @@
229230
@loadBefore="loadTableBefore"
230231
@loadAfter="loadTableAfter"
231232
@rowChange="rowOnChange"
233+
@rowClick="rowOnClick"
232234
:tableData="[]"
233235
:linkView="linkData"
234236
:columns="columns"

‎Vol.Vue/src/components/basic/ViewGridConfig/detailMethods.js‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,74 @@
11
//从表方法
22
let detailMethods = {
3-
//查询从表前先做内部处理
4-
loadInternalDetailTableBefore(param, callBack) {//加载明细表数据之前,需要设定查询的主表的ID
5-
//每次只要加载明细表格数据就重置删除明细的值
6-
if (this.detailOptions.delKeys.length > 0) {
7-
this.detailOptions.delKeys = [];
8-
}
9-
let key = this.table.key;
10-
if (this.currentRow && this.currentRow.hasOwnProperty(key)) {
11-
param.value = this.currentRow[key];
12-
}
13-
return this.loadDetailTableBefore(param, callBack);
14-
},
15-
detailRowOnChange(row) {
16-
this.detailRowChange(row);
17-
},
18-
detailRowChange(row) {//选中行事件
3+
//查询从表前先做内部处理
4+
loadInternalDetailTableBefore (param, callBack) {//加载明细表数据之前,需要设定查询的主表的ID
5+
//每次只要加载明细表格数据就重置删除明细的值
6+
if (this.detailOptions.delKeys.length > 0) {
7+
this.detailOptions.delKeys = [];
8+
}
9+
let key = this.table.key;
10+
if (this.currentRow && this.currentRow.hasOwnProperty(key)) {
11+
param.value = this.currentRow[key];
12+
}
13+
return this.loadDetailTableBefore(param, callBack);
14+
},
15+
detailRowOnChange (row) {
16+
this.detailRowChange(row);
17+
},
18+
detailRowChange (row) {//checkbox选中行事件
1919

20-
},
21-
resetDetailTable(row) {//编辑和查看明细时重置从表数据
22-
if (!this.detailOptions.columns || this.detailOptions.columns.length == 0) {
23-
return;
24-
}
25-
let key = this.table.key;
26-
let query = { value: row ? row[key] : this.currentRow[key] }
27-
if (this.$refs.detail) {
28-
this.$refs.detail.reset();
29-
this.$refs.detail.load(query);
30-
}
31-
},
32-
//从后面加载从表数据
33-
refreshRow() {
34-
this.resetDetailTable();
35-
},
36-
addRow() {
37-
this.$refs.detail.addRow({});
38-
// this.detailOptions.columns.push({});
39-
},
40-
delRow() {
41-
let rows = this.$refs.detail.getSelected();
42-
if (!rows || rows.length == 0) {
43-
return this.$message.error("请选择要删除的行!");
44-
}
45-
if (!this.delDetailRow(rows)) {
46-
return false;
47-
}
48-
this.$Modal.confirm({
49-
title: "删除警告!",
50-
content:
51-
'<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
52-
onOk: () => {
53-
rows = this.$refs.detail.delRow();
54-
let key = this.detailOptions.key;
55-
//记录删除的行数据
56-
rows.forEach(x => {
57-
if (x.hasOwnProperty(key) && x[key]) {
58-
this.detailOptions.delKeys.push(x[key]);
59-
}
60-
})
20+
},
21+
detailRowOnClick ({ row, column, event }) {
22+
//明细表点击行事件2020.11.07
23+
this.detailRowClick({ row, column, event })
24+
},
25+
detailRowClick ({ row, column, event }) {
6126

62-
}
63-
});
27+
},
28+
resetDetailTable (row) {//编辑和查看明细时重置从表数据
29+
if (!this.detailOptions.columns || this.detailOptions.columns.length == 0) {
30+
return;
31+
}
32+
let key = this.table.key;
33+
let query = { value: row ? row[key] : this.currentRow[key] }
34+
if (this.$refs.detail) {
35+
this.$refs.detail.reset();
36+
this.$refs.detail.load(query);
6437
}
38+
},
39+
//从后面加载从表数据
40+
refreshRow () {
41+
this.resetDetailTable();
42+
},
43+
addRow () {
44+
this.$refs.detail.addRow({});
45+
// this.detailOptions.columns.push({});
46+
},
47+
delRow () {
48+
let rows = this.$refs.detail.getSelected();
49+
if (!rows || rows.length == 0) {
50+
return this.$message.error("请选择要删除的行!");
51+
}
52+
if (!this.delDetailRow(rows)) {
53+
return false;
54+
}
55+
this.$Modal.confirm({
56+
title: "删除警告!",
57+
content:
58+
'<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
59+
onOk: () => {
60+
rows = this.$refs.detail.delRow();
61+
let key = this.detailOptions.key;
62+
//记录删除的行数据
63+
rows.forEach(x => {
64+
if (x.hasOwnProperty(key) && x[key]) {
65+
this.detailOptions.delKeys.push(x[key]);
66+
}
67+
})
68+
69+
}
70+
});
71+
}
6572
}
6673

6774
export default detailMethods;

‎Vol.Vue/src/components/basic/ViewGridConfig/methods.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1192,7 +1192,13 @@ let methods = {
11921192
this.rowChange(row);
11931193
},
11941194
rowChange (row) {
1195-
//选中行事件
1195+
//选中行checkbox行事件
1196+
},
1197+
rowOnClick ({ row, column, event }) {
1198+
this.rowClick({ row, column, event });
1199+
},
1200+
rowClick ({ row, column, event }) {
1201+
// 点击行事件(2020.11.07)
11961202
},
11971203
$error (message) {
11981204
this.$Message.error({

‎Vol.Vue/src/components/basic/VolTable.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
<!--没有编辑功能的直接渲染标签-->
174174
<div v-else>
175175
<a href="javascript:void(0)"
176-
@click="link(scope.row, column)"
176+
@click="link(scope.row, column,$event)"
177177
v-if="column.link"
178178
v-text="scope.row[column.field]"></a>
179179
<img v-else-if="column.type == 'img'"
@@ -359,7 +359,7 @@ export default {
359359
//是否显示行号(2020..11.1)
360360
type: Boolean,
361361
default: true,
362-
}
362+
},
363363
},
364364
data () {
365365
return {
@@ -515,6 +515,8 @@ export default {
515515
// this.edit.rowIndex = -1;
516516
},
517517
rowClick (row, column, event) {
518+
// 点击行事件(2020.11.07)
519+
this.$emit("rowClick", { row, column, event })
518520
if (!this.doubleEdit) {
519521
return;
520522
}
@@ -857,7 +859,8 @@ export default {
857859
this.base.previewImg(url, this.http.ipAddress);
858860
// window.open(row[column.field]);
859861
},
860-
link (row, column) {
862+
link (row, column, $e) {
863+
$e.stopPropagation();
861864
this.$props.linkView(row, column);
862865
},
863866
getSelected () {

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGrid.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@
178178
@loadBefore="loadInternalDetailTableBefore"
179179
@loadAfter="loadDetailTableAfter"
180180
@rowChange="detailRowOnChange"
181+
@rowClick="detailRowOnClick"
181182
:url="detailOptions.url"
182183
:index="detailOptions.edit"
183184
:tableData="detailOptions.data"
@@ -229,6 +230,7 @@
229230
@loadBefore="loadTableBefore"
230231
@loadAfter="loadTableAfter"
231232
@rowChange="rowOnChange"
233+
@rowClick="rowOnClick"
232234
:tableData="[]"
233235
:linkView="linkData"
234236
:columns="columns"

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGridConfig/detailMethods.js‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,74 @@
11
//从表方法
22
let detailMethods = {
3-
//查询从表前先做内部处理
4-
loadInternalDetailTableBefore(param, callBack) {//加载明细表数据之前,需要设定查询的主表的ID
5-
//每次只要加载明细表格数据就重置删除明细的值
6-
if (this.detailOptions.delKeys.length > 0) {
7-
this.detailOptions.delKeys = [];
8-
}
9-
let key = this.table.key;
10-
if (this.currentRow && this.currentRow.hasOwnProperty(key)) {
11-
param.value = this.currentRow[key];
12-
}
13-
return this.loadDetailTableBefore(param, callBack);
14-
},
15-
detailRowOnChange(row) {
16-
this.detailRowChange(row);
17-
},
18-
detailRowChange(row) {//选中行事件
3+
//查询从表前先做内部处理
4+
loadInternalDetailTableBefore (param, callBack) {//加载明细表数据之前,需要设定查询的主表的ID
5+
//每次只要加载明细表格数据就重置删除明细的值
6+
if (this.detailOptions.delKeys.length > 0) {
7+
this.detailOptions.delKeys = [];
8+
}
9+
let key = this.table.key;
10+
if (this.currentRow && this.currentRow.hasOwnProperty(key)) {
11+
param.value = this.currentRow[key];
12+
}
13+
return this.loadDetailTableBefore(param, callBack);
14+
},
15+
detailRowOnChange (row) {
16+
this.detailRowChange(row);
17+
},
18+
detailRowChange (row) {//checkbox选中行事件
1919

20-
},
21-
resetDetailTable(row) {//编辑和查看明细时重置从表数据
22-
if (!this.detailOptions.columns || this.detailOptions.columns.length == 0) {
23-
return;
24-
}
25-
let key = this.table.key;
26-
let query = { value: row ? row[key] : this.currentRow[key] }
27-
if (this.$refs.detail) {
28-
this.$refs.detail.reset();
29-
this.$refs.detail.load(query);
30-
}
31-
},
32-
//从后面加载从表数据
33-
refreshRow() {
34-
this.resetDetailTable();
35-
},
36-
addRow() {
37-
this.$refs.detail.addRow({});
38-
// this.detailOptions.columns.push({});
39-
},
40-
delRow() {
41-
let rows = this.$refs.detail.getSelected();
42-
if (!rows || rows.length == 0) {
43-
return this.$message.error("请选择要删除的行!");
44-
}
45-
if (!this.delDetailRow(rows)) {
46-
return false;
47-
}
48-
this.$Modal.confirm({
49-
title: "删除警告!",
50-
content:
51-
'<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
52-
onOk: () => {
53-
rows = this.$refs.detail.delRow();
54-
let key = this.detailOptions.key;
55-
//记录删除的行数据
56-
rows.forEach(x => {
57-
if (x.hasOwnProperty(key) && x[key]) {
58-
this.detailOptions.delKeys.push(x[key]);
59-
}
60-
})
20+
},
21+
detailRowOnClick ({ row, column, event }) {
22+
//明细表点击行事件2020.11.07
23+
this.detailRowClick({ row, column, event })
24+
},
25+
detailRowClick ({ row, column, event }) {
6126

62-
}
63-
});
27+
},
28+
resetDetailTable (row) {//编辑和查看明细时重置从表数据
29+
if (!this.detailOptions.columns || this.detailOptions.columns.length == 0) {
30+
return;
31+
}
32+
let key = this.table.key;
33+
let query = { value: row ? row[key] : this.currentRow[key] }
34+
if (this.$refs.detail) {
35+
this.$refs.detail.reset();
36+
this.$refs.detail.load(query);
6437
}
38+
},
39+
//从后面加载从表数据
40+
refreshRow () {
41+
this.resetDetailTable();
42+
},
43+
addRow () {
44+
this.$refs.detail.addRow({});
45+
// this.detailOptions.columns.push({});
46+
},
47+
delRow () {
48+
let rows = this.$refs.detail.getSelected();
49+
if (!rows || rows.length == 0) {
50+
return this.$message.error("请选择要删除的行!");
51+
}
52+
if (!this.delDetailRow(rows)) {
53+
return false;
54+
}
55+
this.$Modal.confirm({
56+
title: "删除警告!",
57+
content:
58+
'<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
59+
onOk: () => {
60+
rows = this.$refs.detail.delRow();
61+
let key = this.detailOptions.key;
62+
//记录删除的行数据
63+
rows.forEach(x => {
64+
if (x.hasOwnProperty(key) && x[key]) {
65+
this.detailOptions.delKeys.push(x[key]);
66+
}
67+
})
68+
69+
}
70+
});
71+
}
6572
}
6673

6774
export default detailMethods;

‎开发版dev/Vue.NetCore/Vol.Vue/src/components/basic/ViewGridConfig/methods.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1192,7 +1192,13 @@ let methods = {
11921192
this.rowChange(row);
11931193
},
11941194
rowChange (row) {
1195-
//选中行事件
1195+
//选中行checkbox行事件
1196+
},
1197+
rowOnClick ({ row, column, event }) {
1198+
this.rowClick({ row, column, event });
1199+
},
1200+
rowClick ({ row, column, event }) {
1201+
// 点击行事件(2020.11.07)
11961202
},
11971203
$error (message) {
11981204
this.$Message.error({

0 commit comments

Comments
 (0)