当 contenteditable 为真时，从一行复制文本并粘贴到另一列的 "the neighbor" 行

Question

当前结果：当我点击一行时，它会填充另一列的整行而不是另一列的单行

<p
  class="p-of-that"
  v-html="thatText"
  contenteditable
  @click="writeThat(myArr, $event)"
></p>

当我点击其中一行时，它应该是“有点”像这样

同样的事情也适用于“Johan”。单击给定行时，将出现“Johan”并保留“Michael”文本

这是复制品：https://codesandbox.io/s/boring-dirac-mk3sk

单击“那个”列中的一行

我希望它符合大局

Answer 1

我不确定我是否能解决您的问题。但我会试着给你一个想法。首先，您需要考虑二维数组。例如：

const myTable = [
    [myObject1, myObject2],
    [myObject3, myObject4]
];

或者第二列有某个地方的对象。例如：

const myTable = [
    {
        id, column1, column2
    }
];

然后，单击第二列将使 column2 从 column1 接收值。最后，更新数组，大功告成！

应用我所说的！

<template>
  <div id="app">
    <table border="1">
      <thead>
        <th>This</th>
        <th>That</th>
      </thead>
      <tbody>
        <tr v-for="(myArr, index) in myArrs" :key="index">
          <td style="width: 120px">{{ myArr.column1.name }}</td>
          <td style="width: 120px">
            <p class="p-of-that" contenteditable @click="writeThat(index)">
              {{ myArr.column2.name }}
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    myArrs: [
      {
        column1: { id: 1, name: "Michael" },
        column2: { id: 1, name: "" },
      },
      {
        column1: { id: 2, name: "Johan" },
        column2: { id: 2, name: "" },
      },
    ],
  }),

  methods: {
    writeThat(index) {
      this.myArrs[index].column2 = this.myArrs[index].column1;
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 2

此时单击一行时，您将完整的对象传递给 writeThat 函数，您只需要在函数中传递 myArr.name 而不是传递整个 myArr.

此外，添加一个 if 条件来检查 thatText 和 myArr.name.

的当前值

<table border="1">
    <thead>
        <th>This</th>
        <th>That</th>
    </thead>
    <tbody>
        <tr v-for="myArr in myArrs" :key="myArr.id">
            <td style="width: 120px">{{ myArr.name }}</td>
            <td style="width: 120px" @click="writeThat(myArr.name, $event)" contenteditable>
                <p
                    v-if="thatText === myArr.name"
                    class="p-of-that"
                    v-html="thatText"
                ></p>
             </td>
         </tr>
    </tbody>
</table>

同样在处理 writeThat 的调用时，更新 thatText 的值，如：

const writeThat = (data, e) => {
    thatText.value = data
    console.log(e);
};

当 contenteditable 为真时，从一行复制文本并粘贴到另一列的 "the neighbor" 行

Copy text from a row and paste into "the neighbor" row of another column when contenteditable is true

javascript

vue.js

vue-composition-api

应用我所说的！