表格内单元格可点击，查看详情

<el-table:data="tableData"borderstyle="width: 100%"stripe:header-cell-style="{ background: '#F5F6FA', color: '#000' }":height="queryParams.limit == 10 ? 508 : 573"><el-table-columnlabel="序号"width="60"align="center"type="index":index="indexMethod"></el-table-column><el-table-columnshow-overflow-tooltipalign="center"v-for="(item, index) in tableColumn":prop="item.prop":label="item.label":key="index":width="item.width"><template slot-scope="scope"><div v-if="item.label == '监测点编号'"><span class="clickName" @click="handleDetails(scope.row)">{{ scope.row.monitorCode }}</span></div><div v-else>{{ scope.row[item.prop] }}</div></template></el-table-column>
</el-table>data(){return{tableData: [],tableColumn: [{label: "省公司",prop: "province",width: "auto",},{label: "地市公司",prop: "city",width: "auto",},{label: "运维单位",prop: "county",width: "auto",},{label: "监测点类别",prop: "monitorAlias",width: "auto",},{label: "所属电站",prop: "stationName",width: "auto",},{label: "所属线路",prop: "lineName",width: "auto",},{label: "所属台区",prop: "platformName",width: "auto",},{label: "监测对象编号",prop: "mid",width: "auto",},{label: "监测对象名称",prop: "mname",width: "auto",},{label: "监测点编号",prop: "monitorCode",width: "auto",//canClick: "true",},{label: "监测点名称",prop: "monitorName",width: "auto",},{label: "监测点电压等级",prop: "voltageLevel",width: "auto",},{label: "监测点状态",prop: "monitorStatus",width: "auto",},{label: "建档日期",prop: "createdDate",width: "auto",},],queryParams: {page: 1,limit: 10,name: undefined, //监测点编号/姓名province: undefined, //省公司city: undefined, //地市公司organizationId: undefined, //运维单位monitorType: undefined, //监测点类别powerStationId: undefined, //所属电站lineId: undefined, //所属线路platformId: undefined, //所属台区monitorObjectId: undefined, //监测对象编号monitorObjectName: undefined, //监测对象名称monitorCode: undefined, //监测点编号monitorName: undefined, //监测点名称voltageLevel: undefined, //监测点电压等级monitorStatus: undefined, //监测点状态createdDate: new Date().getFullYear()+'-'+((new Date().getMonth()+1)>=10?(new Date().getMonth()+1):('0'+(new                                 Date().getMonth()+1)))+'-'+((new Date().getDate()-1)>=10?(new Date().getDate()-1):('0'+(new               Date().getDate()-1)))//建档日期},type: "",dialogTableVisible:false,monitorCode: {},}
},
methods:{indexMethod(index) {let curpage = this.page; //当前页码let limitpage = this.pageSize; //每页条数return index + 1 + (curpage - 1) * limitpage;},// 点击监测点编号查看详情async handleDetails() {this.type = item.monitorType;const params = {monitorCode: item.monitorCode,};this.dialogTableVisible = true;await https(this.url.classIMonitoringPoints, this.monitorCode).then((res) => {console.log(res);this.form1 = res.data[0];this.form1.firstType =this.form1.firstType === "1"? "运行": this.form1.firstType === "2"? "检修": this.form1.firstType === "3"? "调试": "故障";this.form1.monitorType =this.form1.monitorType === "1"? "I类监测点": this.form1.monitorType === "2"? "II类监测点": "III类监测点";this.form1.isSpecialSupplyElectricity =this.form1.isSpecialSupplyElectricity === "1" ? "是" : "否";this.form1.terminalWiringMethod =this.form1.terminalWiringMethod === "01"? "三相星型": "三相角型";});}
},
<style lang="scss" scoped>.clickName {cursor: pointer !important;text-decoration: underline;color: rgb(31, 134, 129) !important;}
</style>

表格内单元格可点击，查看详情相关推荐

Latex 表格内文字过长自动换行表格内单元格内容强制换行
2019独角兽企业重金招聘Python工程师标准>>> \usepackage{array} \begin{tabular}{m{5cm}}或者\begin{tabular}{p{0 ...
修改Markdown表格对齐方式、markdown表格内单元格换行
记录几个最近经常遇到的问题首先是修改Markdown表格对齐方式,其实就是修改第二行的:的位置默认居中居左居右居中 xxxxxxxxx xxxxxxxxx xxxxxxxxx xxxxxxx ...
latex表格内容上下居中_LaTex表格内单元格内容换行
如何同时让表格同一行一个单元格的文字能垂直居中?比如说文字超长超出页面范围需要分行显示. ~~~ newcommand{tabincell}[2]{begin{tabular}{@{}#1@{}}#2 ...
HTML中如何将表格最外层边框设置成实线，内单元格边框设置成虚线？
如图中所示,最外层边框为实线,内部单元格边框为虚线以下为HTML部分的一部分代码 <body><form action=""><table>/ ...
EduCoder-Web程序设计基础-html5-表格基本结构-第4关：表格中单元格样式的设置
目录任务描述相关知识编程要求测试说明代码示例任务描述本关任务:编写一个两行两列的表格网页,表格中的单元格样式进行设置.效果如下图所示: 表格效果3 相关知识为了完成本关任务,你需要掌握 ...
word(2010)使用VBA完成批处理操作-批量清除表格某单元格内容
word VBA 的使用案例 VBA是什么? 为什么要使用VBA? VBA的运用实例---批量清除表格某单元格内容结语 VBA是什么? VBA(Visual Basic for Applicatio ...
Word插入表格相邻单元格边框断开方法
Word插入表格相邻单元格边框断开方法写论文要将相邻单元格边框打断,见了很多教程,这里详细讲解一些如何实现,重点要掌握应用于单元格和段落的边框是不同的,应用于段落的边框之间是分开的. 实现效果: 操 ...
Word学习：表格相邻单元格边框断开方法
表格相邻单元格边框断开方法 step1:选中待处理的单元格,右键选择表格属性>>边框和底纹 step2:去掉初始状态下的边框(应用于单元格状态下的上/下边框),再选择应用于段落>&g ...
java表格里面显示图片_jquery表格datagrid单元格显示图片及分页使用
要想达到自定义显示表格框的目的比如显示图片,超链接,按钮的形式,只需要给列添加formatter属性即可,比如显示图片: columns: [[ { field: 'IName', title: '显 ...

表格内单元格可点击，查看详情

表格内单元格可点击，查看详情相关推荐

最新文章

热门文章