如何更改 v-data-table 中的单行不是样式，内容

问题描述

我无法为 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>

解决方法

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

<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
        }
      )
    },