admin-fiveFollowing/src/views/monthReport/tables/basicTable.vue

<template>
  <div>
    <div class="basicHeader">
      <span class="demonstration">选择时间:</span>
      <el-date-picker v-model="timeValue" type="month" placeholder="请选择时间" style="margin:0 15px"></el-date-picker>
      <el-button class="search-button" icon="Plus" type="success" @click="Touch()">
        生成
      </el-button>
    </div>
    <div style="margin: 0 15px">
      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
        height="42rem">
        <el-table-column prop="reportName" label="报告名称" width=""></el-table-column>
        <el-table-column prop="reportDate" label="报告统计时间" width=""></el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button type="primary" size="small" @click.prevent="preview(scope.row)" link>
              预览
            </el-button>
            <el-button type="primary" size="small" @click="download(scope.$index, scope.row)" link>
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { useStore } from 'vuex'
import { ElMessage, ElNotification } from 'element-plus'
import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const store = useStore()
const props = defineProps({}) //数据双向绑定
const emit = defineEmits([]);
const { proxy } = getCurrentInstance();
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  timeValue: '',
  tableData: [
    {
      reportName: '钦江路333号月度用电报告_2021年6月',
      reportDate: '2021-06-01 00:00:00-2021-06-30 24:00:00',
    },
    {
      reportName: '钦江路333号月度用电报告_2021年6月',
      reportDate: '2021-06-01 00:00:00-2021-06-30 24:00:00',
    },
  ],
})
const { timeValue, tableData } = toRefs(state)

const Touch = () => {
  console.log('')
}

const download = () => {
  console.log('')
}

const preview = () => {
  console.log('')
}


</script>