table表格嵌套el-dialog

需求 每个表格有一个添加按钮，点击添加按钮出来一个弹框，弹框里面是表格。

现在要保证，弹框的标题和表格的标题是一致的。
现在每个弹窗的标题都是最后一个table的标题。应该是被覆盖了。

<template>
  <div>
    <div v-for="item in JOINTITLE">
      <el-button type="text" @click="addDynamic(module.classifyID)"
        >添加
      <el-dialog :title="item.title" :visible.sync="addDynamicVisible">
        <el-table
          ref="multipleTable"
          :data="newsTitleList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> el-table-column>
          <el-table-column prop="newsTitle" label="姓名"> el-table-column>
        el-table>
        <el-button @click="add(item)">添加el-button>
      el-dialog>
      <el-table :data="newsTitleList" stripe border style="width: 50%">
        <el-table-column :label="item.title" prop="newsTitle">
        el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-top"
              circle
              type="primary"
              @click="moveUp(scope.$index, scope.row)"
            >el-button>
            <el-button
              icon="el-icon-bottom"
              circle
              type="primary"
              @click="moveDown(scope.$index, scope.row)"
            >el-button>
            <el-button
              icon="el-icon-close"
              circle
              type="danger"
              @click="deleteById(scope.row)"
            >el-button>
          template>
        el-table-column>
      el-table>
    div>
  div>
template>

el-dialog不应该放在遍历外面，用一个公共的吗？

建议 el-dialog 别放循环里 都用 一个 点击 添加 吧 对应的数据 传给 el-dialog

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >添加</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    :title="rowData.name"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
  >
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>


data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        dialogVisible: false,
        rowData: {}
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
        this.rowData = row;
        this.dialogVisible = true;
      }
    }