Question

<script> 
import {AgGridVue} from "ag-grid-vue"; 
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.scss';
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import 'ag-grid-community';
import TestsBar from './TestsBar.vue';

export default { 
    name: 'App',
    data() {
        return {
            columnDefs: null,
            rowData: null
        }
    },
    name: "HealthCheckResults", 
    created(){
        this.$http
        .get("HealthCheckData/HealthResults", {
          params: {executionType:this.executionType}
        })
               .then(result => result.json())
        .then(rowData => this.rowData = rowData
        );
         this.$http
          .get("HealthCheckData/HealthResultsByName", {
          params: {healthName: "HeciDriver" ,executionType:this.executionType}})
          .then(response => response.json())
          .then(num => {
            this.heciList.push(num)
            this.$http
          .get("HealthCheckData/HealthResultsByName", {
          params: {healthName: "CseReset" ,executionType:this.executionType}})
          .then(response => response.json())
          .then(num => {
        this.cseList.push(num)
         this.$http
          .get("HealthCheckData/HealthResultsByName", {
          params: { healthName: "Flog",executionType:this.executionType}
        })
          .then(response => response.json())
          .then(num => {
            this.flogList.push(num)
         }); 
        });
        });       
    },
  props:{
    executionType: {
      type: String,
    },
  },
  components:{
       TestsBar,
       AgGridVue,
    },
 data: () => ({
   
   gridOptions:{},
  testStatus: false,
  rowData:null,
        search: '',
        showActionDialog:false,
        load:true,
        num:0,
        cseList:[],
        flogList:[],
        heciList:[],
        tests:null,
        healthList:[], 
        resultsLists:[], 
        healthCheckHeaders:[],
 }) ,
 computed: {
healthCheckHeader(){
this.healthCheckHeaders.push( {  field: 'Date',menuTabs: ["filterMenuTab"],filter: 'agDateColumnFilter', filterParams: {
            comparator: function(filterLocalDateAtMidnight, cellValue) {
                var dateAsString = cellValue;
                var dateParts = dateAsString.split('/');
                var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

                if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
                    return 0;
                }

                if (cellDate < filterLocalDateAtMidnight) {
                    return -1;
                }

                if (cellDate > filterLocalDateAtMidnight) {
                    return 1;
                }
            }
        }
    }, )
this.healthCheckHeaders.push( {  field: 'Result', filter:'agSetColumnFilter' ,menuTabs: ["filterMenuTab"],  cellStyle: function(params) {
        if (params.value==1) {
            return {backgroundColor: 'green',color:'white'};
        } else {
            return {backgroundColor:'red',color:'white'};
        }}} )
this.healthCheckHeaders.push( { field: 'Error',menuTabs: ["filterMenuTab"]} )
this.healthCheckHeaders.push( { field: 'DutIp', filter:'agSetColumnFilter',menuTabs: ["filterMenuTab"],} )
this.healthCheckHeaders.push( { field: 'HealthCheck',filter:'agSetColumnFilter',menuTabs: ["filterMenuTab"], })

this.healthCheckHeaders.push( { field: 'TimeOfFailure',menuTabs: ["filterMenuTab"] } )
if(this.executionType=='Factory Executions')
{
  this.healthCheckHeaders.push( { field: 'Iteration',menuTabs: ["filterMenuTab"]} )
  this.healthCheckHeaders.push(  {field: 'TestName',menuTabs: ["filterMenuTab"],}  )
}
return this.healthCheckHeaders
}
 },
 methods:{
  onFilterTextBoxChanged() {
    this.gridOptions.api.setQuickFilter(document.getElementById('search').value);
    this.search=''
},
 getColor (Result) {
        if (Result==true) return 'green' 
         else return 'red'
},  
  TestsResults(healthList)
    {
      return this.$_.countBy(healthList, function(health) {
      return health.Result==true ? 'passedTests': health.Result==false?'failedTests':'others';
      });
    }
 } 
}
</script>

<template>
  <md-app> 
     <md-app-content style="height:430px !important">
       <v-dialog v-model="showActionDialog">
        <v-card   :tile="true"   width="800px"
          style="position: fixed !important;top: 0 !important; right: 0 !important; bottom: 0 !important;  ">
          <v-card-title  :tile="true" primary-title style="color:#0D47A1;max-height:80px;font-size:18px;"><v-icon style="color:#0D47A1 !important;">timeline</v-icon>Information<v-spacer></v-spacer>Total check:{{healthList.length}}</v-card-title>
           <v-divider></v-divider><br>
         <v-card tile v-for="value in heciList" v-bind:key="value.Date"  style="width:750px; margin-left:20px">
        <v-row >
                 <v-col cols="12" sm="10" style="padding-left:20px;font-family:'Segoe UI Emoji'"><b>Heci Driver</b></v-col>
                  <v-col cols="12" sm="2">Total tests: <b>{{value.length}}</b></v-col>
                 </v-row>
            <TestsBar :chartdata="TestsResults(value)" :testTotal="value.length" :options="options" style="padding-right:5px;padding-left:5px;padding-bottom:5px"></TestsBar><br>
      </v-card><br>
       <v-card  v-for="value in cseList" v-bind:key="value.Date" style="width:750px; margin-left:20px" :tile="true" >
               <v-row >
                 <v-col cols="12" sm="10" style="padding-left:20px;font-family:'Segoe UI Emoji'"><b>Cse Reset</b></v-col>
                  <v-col cols="12" sm="2">Total tests: <b>{{value.length}}</b></v-col>
                 </v-row>
            <TestsBar :chartdata="TestsResults(value)" :testTotal="value.length" :options="options" style="padding-right:5px;padding-left:5px;padding-bottom:5px"></TestsBar><br>
      </v-card><br>
       <v-card tile v-for="value in flogList" v-bind:key="value.Date" style="width:750px; margin-left:20px">
               <v-row >
                 <v-col cols="12" sm="10" style="padding-left:20px;font-family:'Segoe UI Emoji'"><b>Flog</b></v-col>
                  <v-col cols="12" sm="2">Total tests: <b>{{value.length}}</b></v-col>
                 </v-row>
            <TestsBar :chartdata="TestsResults(value)" :testTotal="value.length" :options="options" style="padding-right:5px;padding-left:5px;padding-bottom:5px"></TestsBar><br>
      </v-card>
        </v-card>
       </v-dialog>

    <template> 
      <v-card height="73px">
      <v-card-title style="color:#0D47A1;font-size:18px;font-family:'Segoe UI Emoji';">
       <v-spacer> 
      <v-text-field
       @change="onFilterTextBoxChanged()"
        id="search"
        append-icon="mdi-magnify"
        label="Search"
        style="width:250px"
      ></v-text-field></v-spacer>     
      <v-chip
          color="#0D47A1"
          class="ma-2 white--text"
          v-on="on"
          @click="showActionDialog=true"
        >
        More information
        </v-chip>
      </v-card-title>
       <template>
</template>
           </v-card>
          </template>
          <br>
            <ag-grid-vue style="width: 900px; height:300px;   position: absolute; font-family:'Segoe UI Emoji';" class="ag-theme-alpine"  
            
                 :columnDefs="healthCheckHeader"
                 :rowData="rowData"              
                 :gridOptions="gridOptions"
                 :suppressFilterButton="true"
                 :suppressMenuHide="true"
                 :enableFilter="true"
                 >
    </ag-grid-vue>
  </md-app-content> 
  </md-app> 
</template>

我在vue中使用ag-grid，图标显示不正确，我按如下方式导入样式：

在我放置的app.vue中：

@import“ ../ node_modules / ag-grid-community / dist / styles / ag-grid.css”;

@import“ ../ node_modules / ag-grid-community / dist / styles / ag-theme-alpine.css”;

我在ag-grid-vue组件中的

：

导入'ag-grid-community / dist / styles / ag-grid.css';

导入“ ag-grid-community / dist / styles / ag-theme-alpine.css”；

有什么帮助吗？

https://i.stack.imgur.com/Fz11X.png

Answer 1

我正在使用的React应用中有一个类似的问题。原来，我的基本字体系列已设置为！important替代，这干扰了ag-Grids Icononography。我删除了它，此问题已解决。

图标显示不正确-网格

1 个答案: