0

我无法为 v-data-table 的这个用例找到答案。我知道您可以使用模板和插槽来修改某个列，但是如果我希望我的值仅反映在一行中怎么办？因此，在我的代码中，每次用户右键单击名称列时，它都会添加一个徽标以显示已复制的值，然后在 3 秒后将其从名称中删除 - 有点像切换效果。

每当我单击某行上的名称时，它都能正常工作，并使用 vue-clipboard 的库复制该特定链接的链接值。但是，它也对所有其他具有链接的列执行相同的操作。我只想为一个人做这件事。我无法让 vue-clipboard 库在沙箱中运行，所以我分享了我的代码片段。

为了更好地展示当前行为，这是来自 v-data-table 的截图。（如您所见，即使我只单击第一行，它也会在两行中显示复选图标。预期的行为只会显示已单击单元格的复选图标。在此处输入图像描述

模板;

<template>
    <v-data-table
        :headers="headers"
        :items="tableData"
        class="display-stats"
        :items-per-page="5"
        :footer-props="{
            'items-per-page-options': rowsPerPageItems,
        }"
        >
        <template v-slot:[`item.name`]="{ item }">
            <span v-if="item.link" class="link-span" @contextmenu="copyLink(item.link)">
            <a class="preview-link" :href="item.preview" target="_blank">{{ item.name }}</a>
            <p v-show="copied">
                <v-icon small :color="green">fas fa-check</v-icon>
            </p>
            </span>
            <span v-else>
            {{ item.name }}
            </span>
        </template>
    </v-data-table>
</template>

脚本;

<script lang="ts">
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)


interface PriceStats {
  rowsPerPageItems: Number[]
  copied: boolean
}

export default Vue.extend({
  name: 'Component',

  props: {
    priceData: {
      type: Array as () => Array<PriceStats>,
      default: () => {},
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data(): PriceData {
    return {
      rowsPerPageItems: [10, 20, 30],
      copied: false,
    }
  },
  computed: {
    tableData:{
      get():PriceStats[]{
        if (this.priceData) {
          return this.priceData
        } else {
          return []
        }
      },
      set(newVal:PriceStats){
        this.tableData=newVal
      }
    },

    headers(): DataTableHeader[] {
      return [
        {
          text: 'Name',
          value: 'name',
        },
        {
          text: 'Age',
          value: 'age',
          align: 'center',
        },
        {
          text: 'Salary',
          value: 'salary',
        },
        {
          text: 'Position',
          value: 'format',
        },
        {
          text: 'Date',
          value: 'date',
        },
        {
          text: 'Premium',
          value: 'premium',
          align: 'right',
        },
      ]
    },

  },
  methods: {
    copyLink(previewLink: string) {
      this.$copyText(previewLink).then(
        (e) => {

          this.copied = true
          setTimeout(()=> {
            this.copied = false
          },3000)
        },
        (e) => {
          need an error logic here
          this.copied = false
        }
      )
    },
  },
})
</script>
4

1 回答 1

0

假设用户不能有相同的名称，您可以检查名称是否等于复制行上的名称，然后在此处显示图标。像这样：

<v-data-table ...>
<span v-if="item.link" class="link-span"  @contextmenu="copyLink(item.link,item.name)">
            <a class="preview-link" :href="item.preview" target="_blank">{{     item.name }}</a>
           <p v-show="item.name == copiedName">
             <v-icon small :color="green">fas fa-check</v-icon>
           </p>
            </span>
     </v-data-table>

copiedName可以是一个外部变量，您使用该函数分配用户的名称copyLink

...

copyLink(previewLink: string,name) {
      this.$copyText(previewLink).then(
        (e) => {

          this.copied = true
          this.copiedName = name

          setTimeout(()=> {
            this.copied = false
          },3000)
        },
        (e) => {
          need an error logic here
          this.copied = false
        }
      )
    },
于 2021-06-25T00:29:16.203 回答