如何在 jsx 中使用 vue-matrial 表？

Question

我尝试使用 jsx (typescript) 创建一个带有 vue mattrial 的表格布局。

我的尝试：

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

let c = 0;

@Component
export default class RadarAdminPage extends Vue {

    search = null;
    searched = [] as Array<any>;
    items = [{
        id: c++,
        name: "Paxon Lotterington",
        email: "plotteringtoni@netvibes.com",
        gender: "Female",
        title: "Marketing Assistant"
    }] as Array<any>;

    addItem() {
        this.items.push({
            id: c++,
            name: "Paxon Lotterington",
            email: "plotteringtoni@netvibes.com",
            gender: "Female",
            title: "Marketing Assistant"
        });

        this.searched = this.items;
    }
    searchOnTable() {
        console.log("a");
    }
    created() {
        this.searched = this.items;
    }
    render() {
        return (
            <div class="row">
                <div class="col-12">
                    <card>
                        <div>
                            <md-table v-model={this.searched} md-sort="name" md-sort-order="asc" md-card md-fixed-header>
                                <md-table-toolbar>
                                    <div class="md-toolbar-section-start">
                                        <h1 class="md-title">Users</h1>
                                    </div>

                                    <md-field md-clearable class="md-toolbar-section-end">
                                        <md-input placeholder="Search by name..." vModel={this.search} onInput={this.searchOnTable} />
                                    </md-field>
                                </md-table-toolbar>



                                <md-table-row slot="md-table-row" slot-scope="{ item }">
                                    <md-table-cell md-label="ID" md-sort-by="id" md-numeric>{"{{ item.id }}"}</md-table-cell>
                                    <md-table-cell md-label="Name" md-sort-by="name"> test</md-table-cell>
                                    <md-table-cell md-label="Email" md-sort-by="email"> test</md-table-cell>
                                    <md-table-cell md-label="Gender" md-sort-by="gender"> test</md-table-cell>
                                    <md-table-cell md-label="Job Title" md-sort-by="title"> test</md-table-cell>
                                </md-table-row>
                            </md-table>
                        </div>
                    </card>
                </div >
            </div >
        )
    }
}

但我无法让它以任何方式工作。

它还在底部呈现一个工件行。 jsx可以使用slot-scope吗？

Answer 1

我也玩过 vuetify 并得到了类似的结果，直到我弄清楚了，然后我也能够让它在 vue-matrial 下工作。

这里是一个使用 vuetify 和 vue-matrial 渲染两个表的示例。

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

import { VDataTable, VProgressLinear } from "vuetify-tsx";
import { VDataTable as Test } from 'vuetify/lib';



let c = 0;

@Component
export default class RadarAdminPage extends Vue {


    headers = [
        {
            text: "name",
            align: "left",
            sortable: true,
            value: "name"
        },
        {
            text: "Queue Name",
            value: "queue"
        }
    ]

    search = null;
    searched = [] as Array<any>;
    items = [ ] as Array<any>;

    addItem() {
        this.items.push({
            id: c++,
            name: "Paxon Lotterington",
            email: "plotteringtoni@netvibes.com",
            gender: "Female",
            title: "Marketing Assistant"
        });

        this.searched = this.items;
    }
    searchOnTable() {
        console.log("a");
    }
    created() {
        this.searched = this.items;
    }
    render() {
        console.log(this)
        return (
            <div class="row">
                <div class="col-12">

                    <VDataTable itemKey="id" slot="items:props" items={this.searched} headers={this.headers} scopedSlots={{
                        items: function (prop) {

                            return [
                                <td>{prop}</td>,
                                <td class="text-xs-right">vb</td>
                            ]
                        }
                    } as any}>
                        <VProgressLinear slot="progress" color="blue" indeterminate={true} />

                    </VDataTable>

                    <div>
                        <md-table value={this.searched} md-sort="name" md-sort-order="asc" md-card md-fixed-header scopedSlots={
                            {
                                "md-table-empty-state": (prop)=> {
                                    return (
                                        <md-table-empty-state
                                            md-label="No users found" md-description="`No user found for this '${search}' query. Try a different search term or create a new user.`">
                                            <md-button class="md-primary md-raised" onClick={this.addItem}>Create New User</md-button>
                                        </md-table-empty-state>
                                    )
                                },
                                "md-table-row": function (prop) {

                                    return (
                                        <md-table-row slot="md-table-row" >
                                            <md-table-cell md-label="ID" md-sort-by="id" md-numeric>{prop.item.id}</md-table-cell>
                                            <md-table-cell md-label="Name" md-sort-by="name">{prop.item.name}</md-table-cell>
                                            <md-table-cell md-label="Email" md-sort-by="email"> {prop.item.email}</md-table-cell>
                                            <md-table-cell md-label="Gender" md-sort-by="gender"> {prop.item.gender}</md-table-cell>
                                            <md-table-cell md-label="Job Title" md-sort-by="title"> {prop.item.title}</md-table-cell>
                                        </md-table-row>
                                    )
                                }
                            }
                        }>
                            <md-table-toolbar>
                                <div class="md-toolbar-section-start">
                                    <h1 class="md-title">Users</h1>
                                </div>

                                <md-field md-clearable class="md-toolbar-section-end">
                                    <md-input placeholder="Search by name..." vModel={this.search} onInput={this.searchOnTable} />
                                </md-field>
                            </md-table-toolbar>


                        </md-table>
                    </div>


                </div >
            </div >
        )
    }
}