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

最新推荐文章于 2023-09-05 10:25:09 发布

前端程序员杨青文

最新推荐文章于 2023-09-05 10:25:09 发布

阅读量1.2k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/yqw13989575652/article/details/125655776

版权

这篇博客展示了如何使用Vue.js创建一个带有条纹、边框和自定义样式的表格组件。表格数据动态加载，并实现了点击监测点编号展示详情的功能。通过`handleDetails`方法，获取监测点详细信息，包括类型、状态和建档日期等。同时，博客还包含了样式设置和模板插槽的使用。

摘要由CSDN通过智能技术生成

<el-table
          :data="tableData"
          border
          style="width: 100%"
          stripe
          :header-cell-style="{ background: '#F5F6FA', color: '#000' }"
          :height="queryParams.limit == 10 ? 508 : 573"
          >
    <el-table-column
                     label="序号"
                     width="60"
                     align="center"
                     type="index"
                     :index="indexMethod"
                     ></el-table-column>
    <el-table-column
                     show-overflow-tooltip
                     align="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>