ag-grid-vue表格的一些問題總結（二）

對一繼續補充

1.cellStyle如果有兩個及其以上的值

第一種方式----最新上傳文件的樣式如下：

     {
          headerName: '最新文件上傳人員',
          field: 'UploadPersonnel',
          tooltipField: 'UploadPersonnel',
          sortable: true,
          cellStyle: function (params) {
            // return {
            //   color: params.value === '魯迅' ? '#88d068' : '#ff3366',
            //   background: params.value === '朱自清' ? '#88d068' : '#ff3366'
            // }
            const dic = { 魯迅: '#5676FC', 朱自清: '#2C9CFA', 錢鍾書: '#88D068' }
            return { color: '#fff', background: dic[params.value] }
          }
        },

第二種方式----文件狀態的樣式如下：

      {
          headerName: '文件狀態',
          field: 'status',
          tooltipField: 'status',
          sortable: true,
          cellStyle: function (params) {
            let color = '#25262e'
            if (params.value === '草稿') {
              color = '#b4b61a'
            } else if (params.value === '打印') {
              color = '#3a65ff'
            } else if (params.value === '訂裝') {
              color = '#1AB66C'
            } else if (params.value === '出售') {
              color = '#DC143C'
            }
            return { color: color }
          }
        },

2.是否出售有兩個變量

後臺傳值1或者0，前臺顯示是或否：

{
      headerName: '是否出售',
      field: 'yesno',
      tooltipField: 'yesno',
      sortable: true,
      tooltipValueGetter: function (params) {
        return params.value === '1' ? '是' : '否'
      },
      valueFormatter: function (params) {
        return params.value === '1' ? '是' : '否'
      }
    }

3.aggrid自帶的篩選器（一般在項目上不常用）

具體代碼如下：

<!-- 第一步 加入這句話 :grid-options="gridOptions"-->
    <ag-grid-vue
            style="height: 400px;"
            :accented-sort="true"
            :row-height="30"
            :header-height="30"
            :column-defs="col"
            :row-data="tableList"
            class="ag-theme-balham"
            row-selection="multiple"
            :context="context"
            :default-col-def="defaultColDef"
            :grid-options="gridOptions"
            :suppress-no-rows-overlay="true"
            :enable-browser-tooltips="true"
            @grid-ready="onGridReady"
          >
      </ag-grid-vue>

//第二步 floatingFilter: true顯示篩選器， filter: true 開啓刷選
data () {
    return {
      context: { componentParent: this },
      gridApi: null,
      gridOptions: {
        // turn on floating filters
        floatingFilter: true // 篩選器
      },
       defaultColDef: {
        sortable: true,
        resizable: true,
        width: 150,
        menuTabs: [],
        editable: true, // 單元格可編輯
        filter: true // 開啓刷選
      }
    }
  }

4.外來的篩選器（過濾器）ps:重頭戲來咯

話不多說直接上代碼：

<!-- 搜索框-->
    <el-input
      v-model="key"
      placeholder="請輸入過濾器名稱..."
      @change="externalFilterChanged(key)"
    />

//在data中定義key: ''
//監聽key的變化，改變就調用externalFilterChanged方法
watch: {
    key: {
      handler: function (newVal, oldVal) {
        this.externalFilterChanged()
      },
      immediate: true
    }
  },

methods: {
  externalFilterChanged (newValue) {
      // ageType = newValue
      this.getData()// 這裏代表的是表格原本的值
      const newArr = []
      this.gridApi.onFilterChanged()
      const keys = this.key
      if (keys !== '') {
      // 這裏是循環遍歷把搜索框中內容同表格數據對比，
      // 包含的化重新組成數據賦值給tableList
        this.tableList.forEach(element => {
          if (element.UploadTime.includes(keys)) {
            newArr.push(element)
            this.tableList = newArr
          }
        })
        // 不包含就重新獲取
      } else {
        return this.getData()
      }
    }
}

下圖是執行結果：

不懂可以評論，看到後一定回答。