用vue写出一个点击表格某一行弹窗弹窗里也是表格选择某一行数据后确定返回到原表格数据。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index" @click="showModal(item)">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
<pre><code>&lt;div v-if=&quot;showModalStatus&quot; class=&quot;modal&quot;&gt;
  &lt;div class=&quot;modal-content&quot;&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;姓名&lt;/th&gt;
          &lt;th&gt;年龄&lt;/th&gt;
          &lt;th&gt;性别&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for=&quot;(item, index) in modalData&quot; :key=&quot;index&quot; @click=&quot;selectModalData(item)&quot;&gt;
          &lt;td&gt;{{ item.name }}&lt;/td&gt;
          &lt;td&gt;{{ item.age }}&lt;/td&gt;
          &lt;td&gt;{{ item.gender }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

    &lt;button @click=&quot;closeModal&quot;&gt;关闭&lt;/button&gt;
    &lt;button @click=&quot;confirmModalData&quot;&gt;确定&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '小明',
          age: 18,
          gender: '男'
        },
        {
          name: '小红',
          age: 20,
          gender: '女'
        },
        {
          name: '小刚',
          age: 22,
          gender: '男'
        }
      ],
      showModalStatus: false,
      modalData: [],
      selectedModalData: {}
    }
  },
  methods: {
    showModal(item) {
      this.modalData = this.tableData.filter(data => data.name !== item.name)
      this.showModalStatus = true
    },
    closeModal() {
      this.showModalStatus = false
    },
    selectModalData(item) {
      this.selectedModalData = item
    },
    confirmModalData() {
      if (Object.keys(this.selectedModalData).length === 0) {
        alert('请选择一条数据')
      } else {
        this.tableData.push(this.selectedModalData)
        this.closeModal()
      }
    }
  }
}
</script>
<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 1px solid black;
  text-align: center;
}

th {
  background-color: #eee;
}

tr:hover {
  background-color: #f5f5f5;
}

button {
  margin: 10px;
}
</style>