Vue基于DataV优化样式滚动表格(dv-scroll-board)

效果

代码

<template>
  <div>
    <dv-scroll-board :config="config" style="width: 800px; height: 220px" />
  </div>
</template>

<script>
export default {
  /**
   * header = [{value:label}]
   * data = [{对象}]
   */
  props: ['data', 'header'],
  data() {
    return {
      config: {
        header: [],
        data: [],
        index: true,
        columnWidth: [200, 600, 700, 500],
        align: ['center'],
        rowNum: 10,
        headerHeight: 40,
        headerBGC: '#fff',
        oddRowBGC: '#FFF',
        evenRowBGC: '#FFF'
      }
    }
  },
  created() {
    var header = []
    var clearHeader = []
    this.header.map(val => {
      clearHeader.push(val.label)
      header.push('<span class="roll-table-header">' + val.value + '</span>')
    })
    this.config['header'] = header
    var data = []
    this.data.map(val => {
      var item = []
      clearHeader.map(hd => {
        item.push('<span class="roll-table-item">' + val[hd] + '</span>')
      })
      data.push(item)
    })
    this.config['data'] = data
  }
}

/**
 * 
 *  使用
 *   <rollTable
      :header="[
        { label: 'name', value: '姓名' },
        { label: 'age', value: '年龄' },
        { label: 'desc', value: '描述' }
      ]"
      :data="[
        { name: '张三', age: '12', desc: '我是张三' },
        { name: '李四', age: '21', desc: '我是李四' }
      ]"
    />
 * 
 * 
 */
</script>

<style>
.roll-table-header {
  color: #000;
  font-weight: 800;
  font-size: 16px;
}
.roll-table-item {
  color: #000;
  font-size: 15px;
}
</style>

<style scoped>
/deep/.dv-scroll-board .rows .ceil {
  border-bottom: 1px solid #ebeef4 !important;
}

/deep/.dv-scroll-board .rows .row-item {
  font-size: 20px !important;
  height: 49px !important;
  line-height: 45px !important;
}
</style>