如何在一个Vue文件中添加两个组件以进行导出?

时间:2018-06-21 21:20:19

标签: javascript html vue.js ag-grid vuetify.js

我试图在一个文件中将两个按钮组成一个组件,以将其导出到ag-grid-vue中的单个列中。我每列只能显示一个按钮。这是我的代码:

  <template>
  <div>
      <v-btn fab small style="height: 24px; width:24px; margin-top: -1.5px;"
          color='primary'
          block='true'
          @click.stop="dialogEdit = !dialogEdit">
          <v-icon>fa-pencil</v-icon>
      </v-btn>
      <v-btn fab small style="height: 24px; width:24px; margin-top: -1.5px;"
        color='primary'
        block='true'
        @click.stop="dialogDelete = !dialogDelete">
        <v-icon>fa-trash</v-icon>
      </v-btn>
  </div>
  </template>
  <script>
  import Vue from 'vue';
  export default Vue.extend({
    methods: {
      invokeParentMethod () {
        this.params.context.componentParent.methodFromParent(
          `Row: ${this.params.node.rowIndex}, Col: ${
            this.params.colDef.headerName
          }`
       );
     }
    } 
  });
  </script>

我正在网页设计中导入此文件以添加组件,然后在网格的列中使用它来编辑和更新网格中的记录。它既没有显示错误,也没有改变按钮的样式和边距,但是没有删除按钮的迹象。

1 个答案:

答案 0 :(得分:0)

发现它上面的代码正常运行,只需要从两个按钮组件中删除block ='true'。此属性将按钮扩展到可用空间的100%,以便其他按钮重叠。