使用Ant Design Vue的折叠面板组件时，阻止点击子控件却触发了折叠面板父控件的方法

可以监听子控件的click事件，并调用e.stopPropagation()阻止click事件继续传递，这样外层的折叠面板父控件就接收不到click事件了

代码：

<template>
  <div>
      <a-collapse @change="handleCollapseChange($event, step, index)" draggable="true" @dragstart.native="dragStart($event, step, index)">
        <a-collapse-panel key="1" :forceRender="true">
          <span slot="header">
            <!--编辑页面使用-->
            <span v-if="(step.sceneStepType === 'HTTP用例') || (step.sceneStepType === 'RPC用例') || (step.sceneStepType === '场景用例')">Step{{index + 1}}   {{step.sceneStepName}}</span>
            <span v-if="step.sceneStepType === 'GET请求'">Step{{index + 1}}
              <a-input style="width: 20%" v-model="step.sceneStepName" @click="handleGetRequestChange($event, step)"></a-input>
            </span>
            <span v-if="step.sceneStepType === '条件' && !step.hasOwnProperty('sceneCaseStepResult')">Step{{index + 1}}  If
            <a-input style="width: 10%" v-model="step.sceneFirstExpression" @click="handleFirstExpressionChange($event, step)"></a-input>
            <a-select style="width: 10%" v-decorator="['sceneExpressionJudgeCondition',{ initialValue: step.sceneExpressionJudgeCondition, rules: [{message: 'Please select your gender!' }] },]" placeholder="Select a option and change input text above" @change="handleSelectChange($event, step)">
              <a-select-option v-for="item in stepResultVerifyList" :value="item" :key="item">
                {{item}}
              </a-select-option>
            </a-select>
            <a-input style="width: 10%" v-model="step.sceneSecondExpression" @click="handleSecondExpressionChange($event, step)"></a-input>
          </span>
            <span style="float: right;"><a-icon type="delete" @click="deleteSceneCaseStepById"/></span>
            <!--历史记录查看详情使用-->
            <span v-if="step.hasOwnProperty('interfaceType')">
            <span>Step{{index + 1}}   {{step.testpoint}}  <span style="float: right">运行结果：<a-icon v-if="step.result === 'T'" type="check" style="color: green"/><a-icon v-else type="close" style="color: red"/></span></span>
          </span>
            <span v-if="step.sceneStepType === '条件' && step.hasOwnProperty('sceneCaseStepResult')">Step{{index + 1}}  If
            <a-input style="width: 10%" v-model="step.sceneFirstExpression" @click="handleFirstExpressionChange($event, step)"></a-input>
            <a-select style="width: 10%" v-decorator="['sceneExpressionJudgeCondition',{ initialValue: step.sceneExpressionJudgeCondition, rules: [{message: 'Please select your gender!' }] },]" placeholder="Select a option and change input text above" @change="handleSelectChange($event, step)">
              <a-select-option v-for="item in stepResultVerifyList" :value="item" :key="item">
                {{item}}
              </a-select-option>
            </a-select>
            <a-input style="width: 10%" v-model="step.sceneSecondExpression" @click="handleSecondExpressionChange($event, step)"></a-input>
            <span>(1 = 01)</span>
            <span style="float: right">判断结果：<a-icon v-if="step.sceneCaseStepResult === 'T'" type="check" style="color: green"/><a-icon v-else type="close" style="color: red"/></span>
          </span>
            <span v-if="step.sceneStepType === '等待'">Step{{index + 1}} 等待 <a-input style="width: 10%" v-model="step.sceneStepWaitingtime" @click="handleWaitTimeChange($event, step)"></a-input> 毫秒</span>
          </span>
          <!--折叠面板内容-->
          <!--编辑页面使用-->
          <div v-if="step.sceneStepType === 'GET请求' && !step.hasOwnProperty('sceneCaseStepResult')">
            <a-input v-model="step.sceneStepGetUrl" @click="handleGetUrlChange($event, step)"></a-input>
            <br/>
            <scene-case-step-get-request ref="sceneCaseStepGetRequestObj" @fromSceneCaseStepGetRequest="fromSceneCaseStepGetRequest(step, $event)"/>
          </div>
          <!--历史记录查看详情使用-->
          <div v-if="step.hasOwnProperty('interfaceType')">
            <interface-case-debug-common-details ref="interfaceCaseDebugCommonDetailsObj" :caseTotalData="step"/>
          </div>
          <div v-if="step.sceneStepType === 'GET请求' && step.hasOwnProperty('sceneCaseStepResult')">
            <interface-case-debug-common-details ref="interfaceCaseDebugCommonDetailsObj" :caseTotalData="step"/>
          </div>
        </a-collapse-panel>
      </a-collapse>
  </div>
</template>

<script>
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import SceneCaseAddStep from './SceneCaseAddStep'
import SceneCaseStepGetRequest from './SceneCaseStepGetRequest'
import InterfaceCaseDebugCommonDetails from '../case_management_interface_case_debug_history/InterfaceCaseDebugCommonDetails'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import {deleteSceneStepByStepId} from '../../../../utils/testcenter/api'
export default {
  name: 'SceneCaseCommonStepsPage',
  components: {ATextarea, InterfaceCaseDebugCommonDetails, ARow, ACol, SceneCaseAddStep, SceneCaseStepGetRequest},
  props: ['step', 'index'],
  data () {
    return {
      stepResultVerifyList: ['等于', '不等于', '包含', '不包含', '大于', '小于']
    }
  },
  mounted () {
    console.log('进入 SceneCaseCommonStepsPage mounted方法')
  },
  methods: {
    handleCollapseChange (e, step, index) {
      if (step.sceneStepType === 'GET请求' && !step.hasOwnProperty('sceneCaseStepResult')) {
        this.$nextTick(function () {
          console.log('this.$refs.sceneCaseStepGetRequestObj:', this.$refs.sceneCaseStepGetRequestObj)
          console.log('step.sceneStepGetParams: ' + step.sceneStepGetParams, 'step.sceneStepGetHeader: ' + step.sceneStepGetHeader)
          if (step.sceneStepGetParams !== '[]' && step.sceneStepGetParams !== undefined) {
            this.$refs.sceneCaseStepGetRequestObj.paramsData = JSON.parse(step.sceneStepGetParams)
          }
          if (step.sceneStepGetHeader !== '[]' && step.sceneStepGetParams !== undefined) {
            this.$refs.sceneCaseStepGetRequestObj.headersData = JSON.parse(step.sceneStepGetHeader)
          }
        })
      }
      if (step.hasOwnProperty('interfaceType')) {
        console.log('this.$refs.interfaceCaseDebugCommonDetailsObj:', this.$refs.interfaceCaseDebugCommonDetailsObj)
      }
    },
    handleGetRequestChange (e, step) {
      console.log('13', step.sceneStepName)
      console.log('编辑Get请求类型步骤的步骤名：', e.target.value)
      e.stopPropagation()
    },
    handleFirstExpressionChange (e, step) {
      console.log('编辑条件类型的第一个表达式：', e.target.value)
      e.stopPropagation()
    },
    handleSecondExpressionChange (e, step) {
      console.log('编辑条件类型的第二个表达式：', e.target.value)
      e.stopPropagation()
    },
    handleWaitTimeChange (e, step) {
      console.log('编辑等待类型步骤的时间：', e.target.value)
      e.stopPropagation()
    },
    handleGetUrlChange (e, step) {
      console.log('编辑Get请求类型步骤的步骤名：', e.target.value)
      e.stopPropagation()
    },
    fromSceneCaseStepGetRequest (step, data) {
      console.log('获取到编辑之后的get请求参数和请求头信息' + JSON.stringify(data))
      step.sceneStepGetParams = JSON.stringify(data.paramsData)
      step.sceneStepGetHeader = JSON.stringify(data.headersData)
      step.sceneStepGetExpectResponse = data.sceneStepGetExpectResponse
      step.sceneStepExtractJsonPath = data.sceneStepExtractJsonPath
      console.log('更新了url和请求头信息的step信息：' + JSON.stringify(step))
    },
    handleSelectChange (value, step) {
      console.log(`selected ${value}`)
      step['sceneExpressionJudgeCondition'] = value
    },
    dragStart (e, step, index) {
      console.log('dragStart e', e)
      // e.dataTransfer.setData('my-info', 'hello')
      // e.dataTransfer.setData('my-extra-info', 'world')
      this.$emit('fromSceneCaseCommonStepsPage', step)
    },
    deleteSceneCaseStepById (sceneStepId) {
      deleteSceneStepByStepId({sceneStepId: sceneStepId}).then(res => {
        if (res.data.result === 'success') {
          this.$message.info('删除场景用例步骤成功')
        } else {
          this.$message.info('删除场景用例步骤失败')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>