web-point-standard/src/components/config_point/step3_point/3_identify.vue

<template>
    <el-collapse v-model="activeName" @change="handleChange" accordion>
        <el-collapse-item v-for="(item,index) in renderData" :name="index">
            <template slot="title">
                {{item.Group}}
            </template>
            <div class="collapse-item">
                <handsontable-component :ref="index"></handsontable-component>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>
<script>
    import handsontableComponent from "components/common/handsontable"
    import {
        mapGetters,
        mapActions
    } from "vuex";
export default {
    name: "nullIdentify",
    props: {
        renderData: {
            type: Array,
            default: function(){
                return []
            }
        }
    },
    data(){ return {
        activeName: "1"
    }},
    computed: {
            ...mapGetters("project", [
                "projectId",
                "datasourceId",
                "protocolType"
            ])
        },
    created(){},
    mounted(){},
    methods:{
        handleChange(){
            console.log(this.activeName)
            let allData =this.renderData[this.activeName].PointList,data = {
                data: allData,
                colHeaders: ['设备标识','原始点位描述','位置标签','备注'],
                columns: [
                    {
                        data: 'own'
                    },
                    {
                        data: 'Description',
                        readOnly:true,
                    },
                    {
                        data: 'LocationFlag',
                        readOnly:true,
                    },
                    {
                        data: 'Remarks',
                        readOnly:true,
                    }
                ],
                maxRows: allData.length,
            }
            if(this.protocolType == 'knx'){
                data.colHeaders.splice(2,0,'原始点位地址')
                data.columns.splice(2,0,{
                    data: 'GroupAddress',
                    readOnly: true
                })
            }
            if(this.protocolType == 'modbus-tcp'){
                data.colHeaders.splice(2,0,'原始点位地址')
                data.columns.splice(2,0,{
                    data: 'RegistersAddress',
                    readOnly: true
                })
            }
            console.log(this.activeName,this.$refs)
            this.$refs[this.activeName].init(data)             
        }
    },
    watch:{
        renderData: {
            deep: true,
            handler: function(){
                console.log("changeData",this.renderData)
            }
        }
    },
    components: {
        handsontableComponent
    }
}
</script>
<style lang="scss" scoped>

</style>