vue和element ui 音频文件播放

整出来后是这样子的，外面是一个table，通话录音下是一个组件。

 父组件代码 

<template>
  <div>
       <el-table
          :header-cell-style="{
            background: '#f9f9f9',
          }"
          border
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column type="selection" width="40"> </el-table-column>
          <el-table-column prop="" label="用户"> </el-table-column>
          <el-table-column prop="" label="微信信息"> </el-table-column>
          <el-table-column prop="" label="微信手机号"> </el-table-column>
          <el-table-column prop="" label="通话录音">
            <template slot-scope="scope">
              <my-audio
                :theUrl="scope.row.url"
                :theControlList="scope.row.controlList"
              ></my-audio>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
// 路径自己决定
import myAudio from "../../../components/upload/audio.vue";
export default {
  data() {
    return {
      tableData: [
        {
          url: "",
          controlList: "onlyOnePlaying",
        },
        {
          url: "",
          controlList: "onlyOnePlaying",
        },
      ],
    };
  },
  components: {
    myAudio,
  },
};
</script>

 子组件代码

<template>
  <div
    class="di main-wrap"
    v-loading="audio.waiting"
    element-loading-text="音视频加载中"
    e