2

我正在开发一个使用 Vue2 (2.5.3) 和Vue Tables 2的项目。正如链接的示例所示，我要做的就是在每一行周围添加一个锚点 ，然后调用该edit()函数。但是，它似乎根本没有触发，我没有收到任何错误。知道这是为什么吗？

.vue 文件

  <template>
    <div class="col-md-8 col-md-offset-2">
        <div id="people">
            <v-client-table :data="tableData" :columns="columns">
                <template slot="edit" slot-scope="props">
                    <div>
                        <a class="fa fa-edit" :href="edit(props.row.id)"></a>
                    </div>
                </template>
            </v-client-table>
        </div>
    </div>
</template>

<script>
    import {ServerTable, ClientTable, Event} from 'vue-tables-2';
    import Vue from 'vue';
    import axios from 'axios';

    Vue.use(ClientTable, {
        perPage: 3
    }, false);

    export default {
        methods: {
          edit: function(id){
              console.log("OK", id);
          }
        },
        data() {
            return {
                columns: ['id','name','age'],
                tableData: [
                    {id:1, name:"John",age:"20"},
                    {id:2, name:"Jane",age:"24"},
                    {id:3, name:"Susan",age:"16"},
                    {id:4, name:"Chris",age:"55"},
                    {id:5, name:"Dan",age:"40"}
                ]
            };
        }
    }
</script>

<style lang="scss">
.VuePagination__count {
    display:none;
}
</style>
4

3 回答 3

1

我看到的第一个问题是，我无法从文档中看出以您通过链接提议的方式包装整行。您可以自定义几个预定义的插槽，您还可以为传入columns属性的每一列使用一个插槽。

模板允许你用 vue 编译的 HTML 包装你的单元格。它可以通过以下任何一种方式使用：

请注意，表示单元格。因此，您可以通过将列的名称指定为插槽来为每个单独的单元格提供模板。

在您的示例中，没有edit列，因此实际上没有呈现任何内容。

您可以将一edit列添加到columns：

columns: ['edit', 'id','name','age'],

然后你的模板就可以工作了；它会将字体真棒图标添加到表中的列中。

这是一个例子。

于 2017-11-16T21:05:29.390 回答
0

您可以使用该vue-tables.row-click事件。例如：

Event.$on('vue-tables.row-click', (row) => {
    location.href = "/path/to/asset/" + row.id + "/edit";
});

请参阅将表中的行链接到 url

于 2018-01-06T06:13:50.697 回答
-2

不要使用锚标签上的 href 来触发您的点击事件。像这样做

<a class="fa fa-edit" href="#" v-on:click="edit(props.row.id)"></a>

此外，您使用 :href="edit(props.row.id)" vue 的方式是尝试将值绑定到您的 href 属性。但是你调用的是一个不返回任何值的函数。我想知道如果您检查开发人员控制台，您可能会收到与编译模板相关的错误。无论如何“：”表示绑定，我不认为绑定是你想要在这里做的。

于 2017-11-16T20:42:58.240 回答