Nuxt.js + Ant Design VueでTABLEのセルの値をリンク先で指定する方法

node : v12.14.1
nuxt : v2.0.0
ant-design-vue : v1.1.10

NuxtとAnt Design VueでTABLEを作っているのですが、カラムに検索機能を付けています。
コードはマニュアルにある下記のソースをコピペして使用しています。
https://www.antdv.com/components/table/#components-table-demo-customized-filter-panel
※リンク先のアンカーが正しく機能しない場合があるみたいです。
右メニューの「customized-filter-panel」です。

例えばdataで指定しているkeyを元に動的にリンクを生成するとします。
John Brownなら

javascript
1<nuxt-link :to="/hoge/1">John Brown</nuxt-link>

みたいなコードにしたいのですが、各行のカラムの値やkeyを取得する方法がわかりません。

data[0].keyとすれば1は取得できますが、行数をどうやって指定すればいいのでしょうか？

以下、「ここにリンク設定を追加」という部分にリンクの設定を追加するのだと思うのですが、行数をどうやってカウントするのかわかりません。

ヒントだけでも頂けないでしょうか。
よろしくお願い致します。

javascript
1<template>
2  <a-table :dataSource="data" :columns="columns">
3    <div
4      slot="filterDropdown"
5      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
6      style="padding: 8px"
7    >
8      <a-input
9        v-ant-ref="c => searchInput = c"
10        :placeholder="`Search ${column.dataIndex}`"
11        :value="selectedKeys[0]"
12        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
13        @pressEnter="() => handleSearch(selectedKeys, confirm)"
14        style="width: 188px; margin-bottom: 8px; display: block;"
15      />
16      <a-button
17        type="primary"
18        @click="() => handleSearch(selectedKeys, confirm)"
19        icon="search"
20        size="small"
21        style="width: 90px; margin-right: 8px"
22      >Search</a-button>
23      <a-button @click="() => handleReset(clearFilters)" size="small" style="width: 90px">Reset</a-button>
24    </div>
25    <a-icon
26      slot="filterIcon"
27      slot-scope="filtered"
28      type="search"
29      :style="{ color: filtered ? '#108ee9' : undefined }"
30    />
31    <template slot="customRender" slot-scope="text">
32      <span v-if="searchText">
33        <!-- ここにリンク設定を追加 -->
34        <nuxt-link :to="`/hoge/`+data[0].key">
35          <template
36            v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
37          >
38            <mark
39              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
40              :key="i"
41              class="highlight"
42            >{{fragment}}</mark>
43            <template v-else>{{fragment}}</template>
44          </template>
45        </nuxt-link>
46      </span>
47      <template v-else>
48        <!-- ここにリンク設定を追加 -->
49        <nuxt-link :to="`/hoge/`+data[0].key">{{text}}</nuxt-link>
50      </template>
51    </template>
52  </a-table>
53</template>
54
55<script>
56const data = [
57  {
58    key: "1",
59    name: "John Brown",
60    age: 32,
61    address: "New York No. 1 Lake Park"
62  },
63  {
64    key: "2",
65    name: "Joe Black",
66    age: 42,
67    address: "London No. 1 Lake Park"
68  },
69  {
70    key: "3",
71    name: "Jim Green",
72    age: 32,
73    address: "Sidney No. 1 Lake Park"
74  },
75  {
76    key: "4",
77    name: "Jim Red",
78    age: 32,
79    address: "London No. 2 Lake Park"
80  }
81];
82
83export default {
84  data() {
85    return {
86      data,
87      searchText: "",
88      searchInput: null,
89      columns: [
90        {
91          title: "Name",
92          dataIndex: "name",
93          key: "name",
94          scopedSlots: {
95            filterDropdown: "filterDropdown",
96            filterIcon: "filterIcon",
97            customRender: "customRender"
98          },
99          onFilter: (value, record) =>
100            record.name
101              .toString()
102              .toLowerCase()
103              .includes(value.toLowerCase()),
104          onFilterDropdownVisibleChange: visible => {
105            if (visible) {
106              setTimeout(() => {
107                this.searchInput.focus();
108              }, 0);
109            }
110          }
111        },
112        {
113          title: "Age",
114          dataIndex: "age",
115          key: "age",
116          scopedSlots: {
117            filterDropdown: "filterDropdown",
118            filterIcon: "filterIcon",
119            customRender: "customRender"
120          },
121          onFilter: (value, record) =>
122            record.age
123              .toString()
124              .toLowerCase()
125              .includes(value.toLowerCase()),
126          onFilterDropdownVisibleChange: visible => {
127            if (visible) {
128              setTimeout(() => {
129                this.searchInput.focus();
130              });
131            }
132          }
133        },
134        {
135          title: "Address",
136          dataIndex: "address",
137          key: "address",
138          scopedSlots: {
139            filterDropdown: "filterDropdown",
140            filterIcon: "filterIcon",
141            customRender: "customRender"
142          },
143          onFilter: (value, record) =>
144            record.address
145              .toString()
146              .toLowerCase()
147              .includes(value.toLowerCase()),
148          onFilterDropdownVisibleChange: visible => {
149            if (visible) {
150              setTimeout(() => {
151                this.searchInput.focus();
152              });
153            }
154          }
155        }
156      ]
157    };
158  },
159  methods: {
160    handleSearch(selectedKeys, confirm) {
161      confirm();
162      this.searchText = selectedKeys[0];
163    },
164
165    handleReset(clearFilters) {
166      clearFilters();
167      this.searchText = "";
168    }
169  }
170};
171</script>
172<style scoped>
173.highlight {
174  background-color: rgb(255, 192, 105);
175  padding: 0px;
176}
177</style>

追記です。
行数にこだわりはありません。
要はその行の値が取り出せれば何でもいいのです。

以前vuetifyを使用した時propsで取り出せたので、何か同じようなやり方をご存知の方はいらっしゃらないでしょうか。

reactのAnt Designでも参考になります。

行動規範の内容に同意します

回答1件

自己解決

こんなんわかるか、ウンコヤロー！と思わず叫んでしまいましたが、リンク先のマニュアルを見ながらテキトーにいじっていたら解決できました。
見つけられたのは偶然です。

その行の値はすべてkeyというobjectに入っているようで、例えばそれぞれのageが欲しい場合はkey.ageで取り出せるようになっているみたいです。

今回はdataの中のkeyに入っているIDのようなものでリンクを設定したかったので、該当箇所を以下のようにkey.keyにすればうまくいきました。

javascript
1    <template slot="customRender" slot-scope="text,key">
2      <span v-if="searchText">
3        <!-- ここにリンク設定を追加 -->
4        <nuxt-link :to="`/summary/`+key.key">
5          <template
6            v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
7          >
8            <mark
9              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
10              :key="i"
11              class="highlight"
12            >{{fragment}}</mark>
13            <template v-else>{{fragment}}</template>
14          </template>
15        </nuxt-link>
16      </span>
17      <template v-else>
18        <!-- ここにリンク設定を追加 -->
19        <nuxt-link :to="`/summary/`+key.key">{{text}}</nuxt-link>
20      </template>
21    </template>

NuxtのUIフレームワークは解説がどれもイマイチで難しいですね。。。

投稿2020/02/14 01:38

police

総合スコア14

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Nuxt.js + Ant Design VueでTABLEのセルの値をリンク先で指定する方法

関連した質問