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
  }
})