Question

我需要＆＃34;勾＆＃34;在Vue挂载事件之后创建的对象。

在一个页面中我有应用程序，在其中我有一个div，我在其中呈现ASP.NET Core JS2 Syncfusion服务器端网格。

在调试中，我看到在安装vue组件后渲染网格。

我如何阅读＆＃34; ref＆＃34;我放了一些网格列？

但特别是什么是最好的策略＆＃34; hook＆＃34;在我的Vue应用程序内部，在挂载的事件之后渲染的外部对象？

HTML

    <div>Omitted for brevity</div>

        <div id="app">
        <div>

                        <ejs-grid id="grid" enablePersistence="false" dataSource="Model" allowPaging="true" allowFiltering="true" allowGrouping="true"
                                  allowSorting="true" allowExcelExport="true" showColumnChooser="true" allowReordering="true"
                                  contextMenuItems="ContextMenuitems" contextMenuClick="contextMenuClick" 
                                  toolbar="@(new List<string>() { "Search", "ColumnChooser" })">



                        <e-grid-columns>
                            <e-grid-column template="#template" headerText="@Html.DisplayNameFor(model => model.Title)"  ></e-grid-column>
                            <e-grid-column field="Seller.FullName" headerText="@Html.DisplayNameFor(model => model.SellerId)" visible="false"></e-grid-column>

                            <div>Omitted for brevity</div>
                        </ejs-grid>
        </div>



    <script id="template" type="text/x-template">


        <div ref="title">${Title}</div>

    </script>

Vue的

new Vue({
    el: '#app',
    data: {
        range: {
            from: null,
            to: null
        },
        filter: {
            show: null
        },
        filters: []
    },
    mounted() {
        // Tried here with no luck
        this.$refs.title
    },

更新

我注意到razor（服务器端）内的所有html代码都不能与Vue一起使用，例如

    @if (true)
    {

        <div ref="title"></div>
    }

Vue不会查看此引用，也会在updated和nextTick

中查看

Answer 1

我们建议您使用以下代码，这些代码允许您在网格渲染后修改网格中的现有列或向网格添加新列。

 <ejs-grid id="Grid">
    ...
 </ejs-grid>

要更改网格中列的宽度，请按照以下代码进行操作：

 //Allows you to get the Grid element. Here “Grid” is the ID of Grid element.
 var grid = document.getElementById("Grid")

 //Creates a instance for the Grid
 var gridinstance = grid.ej2_instances[0]

 //Changes the width of the column in 2nd index
 gridinstance.columns[2].width = 400;

 //To refresh the columns in Grid to view the changes call the below function
 gridinstance.refreshColumns();

要在Grid中添加新列，请按照以下代码：

//Allows you to get the Grid element. Here “Grid” is the ID of Grid element.
var grid = document.getElementById("Grid")

//Creates a instance for the Grid
var gridinstance = grid.ej2_instances[0]

//Adds a new column in in the Grid
gridinstance.columns.push({ field: "ShipCity" })

//To make the added new column display in Grid call the below function
gridinstance.refreshColumns();

如果我们误解了您的查询。请提供有关您的要求的更多详情。请分享视频演示来解释您的要求。

Vue＆＃34; hook＆＃34;外部对象渲染后挂载事件

1 个答案: