Question

＆＃13;

{ "name": "main-page", "main": "main-page.html", "dependencies": { "polymer": "Polymer/polymer#^1.4.0", "polymer-ts": "^0.2.2", "paper-button": "PolymerElements/paper-button#^2.0.0", "paper-dialog": "PolymerElements/paper-dialog#^2.0.0", "csv-render":
"LRNWebComponents/csv-render#^0.1.0", "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0", "papa-parser": "milesje/papa-parser#^1.0.0", "iron-data-table": "Saulis/iron-data-table#^1.0.7", "vaadin-grid": "vaadin/vaadin-grid#^3.0.1",
"paper-datatable": "David-Mulder/paper-datatable#^0.9.8" }, "devDependencies": { "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", "web-component-tester": "^6.0.0-prerelease.5",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" }, "resolutions": { "paper-button": "^2.0.0", "polymer": "^1.9.0", "iron-a11y-keys-behavior": "^v2.0.0", "iron-resizable-behavior": "^v2.0.0", "iron-scroll-target-behavior": "^v2.0.0", "iron-a11y-announcer":
"^v2.0.0", "webcomponentsjs": "^0.7.0", "paper-styles": "~1.0.12" } }

＆＃13;

paper-dialog大部分时间都可以正常工作，但有时会在其上方显示空白区域，我试图将paper-datatable放在paper-dialog内。请帮忙。

＆＃13;

/// <reference path = "../bower_components/polymer-ts/polymer-ts.d.ts"/>
@component("main-view")

class MainView extends polymer.Base {
    @property ({type:Array, value: []})
    records;

    parseData(url, onSuccess: (tasks) => void) {
        Papa.parse(url,{
            header: true,
            download: true,
            complete: function (results) {
                onSuccess(results.data)   
            }
        })
    }

    openDialog() {
        this.parseData("./csv/demo.csv",(records) => {
            this.records = records
        });
        this.$.dialog.open();
    }
}
MainView.register();

＆＃13;

{
  "name": "main-page",
  "main": "main-page.html",
  "dependencies": {
    "polymer": "Polymer/polymer#^1.4.0",
    "polymer-ts": "^0.2.2",
    "paper-button": "PolymerElements/paper-button#^2.0.0",
    "paper-dialog": "PolymerElements/paper-dialog#^2.0.0",
    "csv-render": "LRNWebComponents/csv-render#^0.1.0",
    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
    "papa-parser": "milesje/papa-parser#^1.0.0",
    "iron-data-table": "Saulis/iron-data-table#^1.0.7",
    "vaadin-grid": "vaadin/vaadin-grid#^3.0.1",
    "paper-datatable": "David-Mulder/paper-datatable#^0.9.8"
  },
  "devDependencies": {
    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
    "web-component-tester": "^6.0.0-prerelease.5",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
  },
  "resolutions": {
    "paper-button": "^2.0.0",
    "polymer": "^1.9.0",
    "iron-a11y-keys-behavior": "^v2.0.0",
    "iron-resizable-behavior": "^v2.0.0",
    "iron-scroll-target-behavior": "^v2.0.0",
    "iron-a11y-announcer": "^v2.0.0",
    "webcomponentsjs": "^0.7.0",
    "paper-styles": "~1.0.12"
  }
}

＆＃13;

<!DOCTYPE html>
        <link rel="import" href="../bower_components/polymer/polymer.html"/>
        <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
        <link rel="import" href="../bower_components/polymer-ts/polymer-ts.html"/>
        <link rel="import" href="../bower_components/paper-dialog/paper-dialog.html"/>
        <link rel="import" href="../bower_components/paper-button/paper-button.html"/>
        <link rel="import" href="../bower_components/papa-parser/papa-parser.html"/>
        <link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"/>
        <link rel="import" href="../bower_components/paper-datatable/paper-datatable.html">


        <dom-module id="main-view">
            <style>
                .preview {
                    background-color: var(--paper-indigo-500);
                    color: white;
                    text-align: center;
                    margin: auto;  
                }
                iron-overlay-backdrop {
                    --iron-overlay-backdrop-opacity: 1;
                }
            </style>
            <template> 
                <paper-button raised class="preview" on-tap="openDialog">OPEN PREVIEW</paper-button>    
                <paper-dialog id="dialog"  with-backdrop>
                    <paper-dialog-scrollable>
                        <paper-datatable data={{records}}> 
                            <paper-datatable-column header="Names">
                                <template>
                                    <span>{{item.Name}}</span>
                                </template>
                            </paper-datatable-column>
                            <paper-datatable-column header="Email">
                                <template>
                                    <span>{{item.Email}}</span>
                                </template>
                            </paper-datatable-column>
                            <paper-datatable-column header="Score">
                                <template>
                                    <span>{{item.Score}}</span>
                                </template>
                            </paper-datatable-column>
                            <paper-datatable-column header="Date">
                                <template>
                                    <span>{{item.Date}}</span>
                                </template>
                            </paper-datatable-column>
                        </paper-datatable>
                    </paper-dialog-scrollable>         
                </paper-dialog>
            </template>
        </dom-module>

＆＃13;

纸质对话框显示其上方的空白

0 个答案: