vue+element UI 學習總結筆記（十六)_element UI table的使用

1. 修改element-UI table樣式
2. 動態綁定表頭與表數據

滾動樣式修改：

index中，統一修改表格滾動條樣式：

 .el-table{
      padding-right: 3px;
      margin-bottom: 5px;
      margin-top: 2px;
      background: #F5F9FE;
      border:none;
      // overflow: visible !important;
  }
  .el-table ::-webkit-scrollbar {
      display: block;
      width: 15px; /*對垂直流動條有效*/
      height: 10px; /*對水平流動條有效*/
  }
  
  /*定義滾動條的軌道顏色、內陰影及圓角*/
  .el-table ::-webkit-scrollbar-track{
      // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
      // background-color: rosybrown;
      // border-radius: 3px;
  }
  /*定義滑塊顏色、內陰影及圓角*/
  .el-table ::-webkit-scrollbar-thumb{
      border-radius: 7px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
      background-color: rgba(144,147,153,.8);
  }
  .el-table ::-webkit-scrollbar-thumb:hover{
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgba(144,147,153,1);
  }
  
  /*定義兩端按鈕的樣式*/
  .el-table ::-webkit-scrollbar-button {
      // background-color:cyan;
  }
  /*定義右下角匯合處的樣式*/
  .el-table ::-webkit-scrollbar-corner {
      // background: rgba(0, 0, 0, 0);
  }

數據準備：

表頭的定義：（定義了一套表頭，從技術上看，這個表頭重後端傳遞應該更合理）

      // 提取的表頭數據
      tablehd: [
        {
          width: '120',
          prop: 'agencycode',
          label: '執收單位編碼'
        },
        {
          width: '200',
          prop: 'agencyname',
          label: '執收單位名稱'
        },
        {
          width: '100',
          prop: 'year',
          label: '計劃年度'
        },
        {
          width: '100',
          prop: 'typename',
          label: '填報口徑'
        },
        {
          width: '100',
          prop: 'currency',
          label: '金額單位'
        },
        {
          width: '100',
          prop: 'applicant',
          label: '申請人'
        },
        {
          width: '120',
          prop: 'applydate',
          label: '申請日期'
        },
        {
          width: '100',
          prop: 'reported',
          label: '送審標誌'
        },
        {
          width: '100',
          prop: 'reporter',
          label: '送審人'
        },
        {
          width: '120',
          prop: 'reportdate',
          label: '送審日期'
        },
        {
          width: '100',
          prop: 'auditmark',
          label: '審覈標誌'
        },
        {
          width: '100',
          prop: 'reviewer',
          label: '審覈人'
        },
        {
          width: '120',
          prop: 'auditdate',
          label: '審覈日期'
        }
      ],

後臺傳過來的數據是：

我們項目中，如果是分頁數據，傳遞的是data.data，如果不分頁，傳遞的是data.

  // 查找
    onSubmit() {
      // planList數據
      dwzsjhgl.planList(this.form).then(res => {
        this.tableData = res.data.data
        // 設置總條數
        this.form.totalCount = res.data.pageInfo.totalCount
        // 設置表中數據
        this.$refs.singleTable.setCurrentRow(this.tableData[0])
        console.log(JSON.stringify(res.data.data))
      })
    },

綁定表頭、及表格數據：

其中：

prop

對應列內容的字段名，也可以使用 property 屬性

string

表格中的template的使用：（template插槽）

看個例子：

          <template slot-scope="scope">
            <span v-if="item.prop === 'reported'|| item.prop === 'auditmark'">
              {{ scope.row[item.prop] | markFilter }}
            </span>
            <span v-else>
              {{ scope.row[item.prop] }}
            </span>
          </template>

這其中，用到過濾器 markFilter,用於把0、1轉換爲√，×

這個過濾器，我們把它定義在main當中

Vue.filter('markFilter', (val) => {
  if (+val === 0) {
    return '×'
  } else if (+val === 1) {
    return '√'
  } else { // 新加的。
    return val
  }
})