1.实现效果
根据一些条件来限制是否可以点击跳转页面(例如详情页)
2.实现方法
<el-table :data="tableData" :row-key="getRowKey" border ref="multiTable" :cell-class-name="cellStyle" @cell-click="toPatientDetail" v-loading="loading"
size="medium">
<el-table-column prop="nickName" label="收件人" width="100px">
</el-table-column>
</el-table>
//js
// 指定一个key标识这一行的数据
getRowKey(row) {
return row.id;
},
//修改患者列样式
cellStyle({ row, column, rowIndex, columnIndex }) {
//第几列+限制条件
if (columnIndex === 0 && row.bizPatid != '/') {
return "cilck"
}
else if (columnIndex === 0 && row.bizPatid == '/') {
return "noclick"
}
else {
return ''
}
},
//控制跳转等操作
//患者详情页跳转事件函数
toPatientDetail(row, column) {
//跳转列+限制条件
if (column.label == "收件人" && row.bizPatid != '/') {
this.$router.push({
});
}
},
//css
::v-deep .noclick{
cursor: auto !important;
}
::v-deep .click{
color: #0696e1 !important;
cursor: pointer !important;
}
搞定收工