Question

我尝试使用jsx（打字稿）使用vue matrial创建表布局。

我的尝试

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

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

它还在底部显示一个工件行。可以将slot-scope与jsx一起使用吗？

Answer 1

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

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

extension UIViewController {

func showAlert() {
    let popupAlert = UIView(frame: CGRect(x: 0, y: -60, width: view.frame.width, height: 60))
    popupAlert.backgroundColor = UIColor.brandSuccess()
    let window = (UIApplication.shared.delegate as! AppDelegate).window!

    window.addSubview(popupAlert)

    UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseIn, animations: {
        popupAlert.transform = .init(translationX: 0, y: 60)
    }) { (_) in
        UIView.animate(withDuration: 0.6, delay: 4, options: .curveEaseIn, animations: {
            popupAlert.transform = .init(translationX: 0, y: -60)

        }, completion: { (_) in
            popupAlert.removeFromSuperview()
        })
    }
}
}

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

1 个答案: