我用组件化把上千行代码优化到15行

项目中的一个sinkCom.vue需要切换多个table表格，发现代码全都写到一个面中长达上千行，经过用动态组件的办法讲每个table页面拆分到不同的vue文件中，再讲公用的修改和删去功能提出出来，假如后续增加新的table会更加的方便

运用componet动态烘托组件

<template>
    <div class="secpage-con" style="overflow-y: auto" id="top-to-sinks-pane">
        <div class="mec-form-contain">
            <component
                :is="tbType"
                :tbType="tbType"
                :projectId="projectId"
                @toPage="toPage"
                :dataSource="dataSource"
                @deleteData="deleteData"
                @editData="editData"
            ></component>
        </div>
    </div>
</template>

这儿的tbType会动态切换成kafka-sink、hbase-sink、jdbc-sink，经过组件名的切换来达到切换table的作用

引进组件 tbType为’hbase-sink’对应 HbaseSink

import KafkaSink from "../table/sink/KafkaTable.vue";
import HbaseSink from "../table/sink/HBaseTable.vue";
import JdbcSink from "../table/sink/JdbcTable.vue";

注册组件

components: {
    KafkaSink,
    JdbcSink,
    HbaseSink,
},

//比方
<component
    //:is="kafka-sink"
    :is="tbType"
    ...
></component>

component会依据is的内容显现组件，咱们用切换tbType来达到动态组件的作用

独立数据查询办法

每个表格数据或许不同，所以获取表格的数据独立在每个table的vue文件中,可是数据一致命名，比方tableData，currentPage等后续能够抽离出办法在父组件中封装成一致的办法进行调用，方便很多

data() {
    return {
        paging: {
            tableData: [],
            currentPage: 1,
            count: 0,
            pageSize: 10,
        },
    };
},
//获取表格数据
fetchData() {
    let vm = this;
    vm.loading = true;
    http.doRequest("yoururl", {
        currentPage: vm.paging.currentPage,
        pageSize: vm.paging.pageSize,
        projectId: vm.projectId,
        name: vm.kafkaName,
    }).then((result) => {
        vm.loading = false;
        let res = result.data;
        if (res.code == 0) {
            vm.paging.tableData = res.data
            //...
        }
   })

组件的烘托和毁掉

mounted() {
    vebOn("getFetchData", (vedData) => {
        this.fetchData();
    });
    this.fetchData();
},
beforeDestroy() {
    // 毁掉
    vebOff("getFetchData");
},

抽离 修改 和 删去 功能

每个表格都有修改的办法，所以一致抽出来在父组件中进行调用，在函数中判别不同的子组件触发改变icon

//sinkCom.vue
<component
    ...
    @editData="editData"
></component>
editData(data, type) {
    console.log('editData')
    this.toPage(data.name, type, data.id, data.foldId);
},
//依据不同组件触发同一个修改函数
toPage(label, comPage, id) {
    let icon = {
        CsKafka: "icon-kafka",
        CsWebhook: "icon-webhook",
        CsHBase: "icon-hbase",
        CsKudu: "icon-kudu",
        CsJdbc: "icon-jdbc",
        SinkFlinkDDL: "icon-flinkddl",
    };
    let tab = {
        label,
        comPage,
        id,
        icon: icon[comPage],
    };
    this.$store.commit("ADD_TAB", tab);
},
//kafka.vue
<el-tooltip
    class="table-tooltip"
    :open-delay="1000"
    :content="'修改'"
    placement="top"
>
    <div
        class="
            table-icon-con
            flex-vertical-center
        "
        @click.stop="
            $emit('editData',scope.row, 'CsKafka')
        "
    >
        <span
            class="table-icon icon-edit"
        ></span>
        <span>修改</span>
    </div>
</el-tooltip>

抽离页码和当前页改变办法

这儿便是为什么之前咱们要一致子组件中的tableData等办法的命名，在页码改变成功的时候直接调用组件的fetchData来从头获取数据，SizeChange和CurrentChange中做的调用和判别就会更加简洁，

//kafka.vue
<div class="pane-pager">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.count"
    ></el-pagination>
</div>
handleSizeChange(size) {
    this.$emit('SizeChange','kafka-sink',size)
},
handleCurrentChange(current) {
    console.log(123)
    this.$emit('CurrentChange','kafka-sink',current)
},

//sinkCon.vue
<component
    ....
    @SizeChange="SizeChange"
    @CurrentChange="CurrentChange"
></component>
//这儿的ref指的是组件的命名，在引进组件注册那一步声明的
SizeChange(ref,size){
    console.log('sizechange',ref,size)
    //this.$refs['kafka-sink'].paging.currentPage = 1;//变量详细
    this.$refs[ref].paging.currentPage = 1;
    this.$refs[ref].paging.pageSize = size;
    this.$refs[ref].fetchData()
},
CurrentChange(ref,size){
    console.log('currentchange',ref,size)
    this.$refs[ref].paging.currentPage = size;
    this.$refs[ref].fetchData()
},