表格单元格点击事件
程序员文章站
2022-06-08 15:41:22
...
<el-table
//单元格点击事件
@cell-click="weituocanhuil"
//更改样式
:cell-style="cellStyle"
v-if="flag"
ref="dragTable2"
:data="memberData"
row-key="id"
border
:header-cell-style="{ background: '#F3F6FB' }"
:row-class-name="tableRowClassName"
>
<el-table-column
id="other"
//绑定点击事件,决定点击哪个单元格
prop="feedbackStatusValue"
label="参会方式"
v-if="num == 1"
:class-name="sort2 ? 'allowdrog' : 'allowdrog3'"
>
weituocanhuil(row, column, cell, event) {
//绑定点击事件,决定点击哪个单元格
if (column.property == "feedbackStatusValue") {
this.weituodialogVisible = true;
this.canhuiren = row.memberName;
this.weituoSubmit.memberId = row.memberId;
this.weituoSubmit.feedbackStatusValue = row.feedbackStatusValue;
this.weituoSubmit.feedbackStatusCode = row.feedbackStatusCode;
this.weituoSubmit.entrustId = row.entrustId;
this.memberData2 = [];
if (this.memberData && this.memberData.length) {
this.memberData.forEach((item) => {
if (item.memberId != row.memberId) {
this.memberData2.push(item);
}
});
}
if (this.memberData2 && this.memberData2.length) {
this.memberData2.forEach((item, index) => {
if (item.memberId != row.entrustId) {
this.weituoSubmit.entrustId = row.entrustName;
}
});
} else {
this.weituoSubmit.entrustId = row.entrustName;
}
}
},
比较特殊的是,样式需要在js里面更改
如下:
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex == 5) {
return "color:#4d84fe;cursor: pointer";
}
},
上一篇: 一个简单的自定义Android日历
下一篇: 一个简单的MFC中TreeView使用