eta_front/src/views/dataEntry_manage/codecount/compoments/dataTable.vue

<template>
  <table id="dataTable" ref="datatable"></table>
</template>

<script>
const tableOptions = {
  scrollY: "250px",
  searching: false,
  scrollCollapse: true,
  paging: false,
  fixedHeader: true,
  autoWidth: true,
  ordering: false,
  stripeClasses: [ 'strip1', 'strip2' ]
}
export default {
  name: '',
  props: {

    columns: {
      type: Array,
      default: [
        { title: '日期' },
        { title: '值'  },
      ],
    },
    data: {
      type: Array,
      default: [],
    }
  },
  methods: {
    initData() {
      this.DataTable = $('#dataTable').DataTable({
        ...tableOptions,
        data: this.data,
        columns: this.columns,
      });
    },
  },
  mounted() {
    this.initData();
  }
};
</script>
<style lang="scss" >
.dataTables_wrapper {
  .dataTable td {
    text-align: center !important;
  }
  .dataTables_scrollHeadInner,.dataTables_scrollHeadInner .dataTable  {
    width: 100% !important;
  }
  .dataTables_info {
    display: none;
  }
  .strip1  td{
    background-color: #f9f9f9
  }
}
</style>