18.vue简单表格封装以及国际化不更新表头

18.vue简单表格封装以及国际化

国际化可以看一下前几张的文章

1.思路

数据是从后端返回的，如果没有接口。自己可以在data中自己定义数据

• 封装的表格组件
  将表名抽成一个数组对象，表格数据是一个数组对象，

表格数据：

// 表格数据
      memberList: [],

表格标签：为了国际化，我把表格label字段，放进语言包，以下代码，需要放入计算属性中，不然语言切换，表头是无法更新的。

[
        {
          label: this.$t('lang.month'),
          prop: 'month'
        },
        {
          label: this.$t('lang.newMembers'),
          prop: 'addMember'
        },
        {
          label: this.$t('lang.memIntegral'),
          prop: 'addIntegral'
        },
        {
          label: this.$t('lang.getCoupons'),
          prop: 'getCoupons'
        },
        {
          label: this.$t('lang.registerUser'),
          prop: 'registerUser'
        }
      ]

2.CommonTable组件

CommonTable.vue组件中的内容

<template>
  <el-main>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column v-for="(item, index) in tableLabel" :key="index" :prop="item.prop" :label="item.label"> </el-table-column>
    </el-table>
  </el-main>
</template>

<script>
export default {
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 表格头部文字
    tableLabel: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  created() {}
}
</script>

<style lang="scss" scoped></style>

3.使用组件

home.vue

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6"
        ><el-card>
          <div class="top-card">
            <div class="content-label">
              <span class="content-label-title">{{ $t('lang.newMembers') }}</span>
              <span class="content-label-num">20</span>
            </div>
            <div class="content-chart">
              <el-progress type="circle" :percentage="25"></el-progress>
            </div>
          </div> </el-card
      ></el-col>
      <el-col :span="6"
        ><el-card>
          <div class="top-card">
            <div class="content-label">
              <span class="content-label-title">{{ $t('lang.getCoupons') }}</span>
              <span class="content-label-num">20</span>
            </div>
            <div class="content-chart">
              <el-progress type="circle" :percentage="100" status="success"></el-progress>
            </div>
          </div> </el-card
      ></el-col>
      <el-col :span="6"
        ><el-card>
          <div class="top-card">
            <div class="content-label">
              <span class="content-label-title">{{ $t('lang.memIntegral') }}</span>
              <span class="content-label-num">20</span>
            </div>
            <div class="content-chart">
              <el-progress type="circle" :percentage="70" status="warning"></el-progress>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6"
        ><el-card>
          <div class="top-card">
            <div class="content-label">
              <span class="content-label-title">{{ $t('lang.registerUser') }}</span>
              <span class="content-label-num">20</span>
            </div>
            <div class="content-chart">
              <el-progress type="circle" :percentage="50" status="exception"></el-progress>
            </div>
          </div> </el-card
      ></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="table-card-table">
          <common-table :tableData="memberList" :tableLabel="memberListLabel"></common-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="table-card">
        </el-card>
        <el-card class="table-card-tow">
          <div class="table-card-tow-wrapper">
            <div class="right">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CommonTable from '@/components/table/CommonTable.vue'
export default {
  components: {
    CommonTable,
    CommonEcharts
  },
  data() {
    return {
      // 表格数据
      memberList: [],
      echartData: {
        merberLine: {
          xData: [],
          series: []
        },
        merberBar: {
          xData: [],
          series: []
        },
        merberPie: {
          series: []
        }
      }
    }
  },
  computed: {
    // 表格label标签
    memberListLabel() {
      return [
        {
          label: this.$t('lang.month'),
          prop: 'month'
        },
        {
          label: this.$t('lang.newMembers'),
          prop: 'addMember'
        },
        {
          label: this.$t('lang.memIntegral'),
          prop: 'addIntegral'
        },
        {
          label: this.$t('lang.getCoupons'),
          prop: 'getCoupons'
        },
        {
          label: this.$t('lang.registerUser'),
          prop: 'registerUser'
        }
      ]
    }
  },
  created() {
    console.log(this.memberListLabel)
    this.getMembers()
  },
  methods: {
    getMembers() {
      this.$api.getHomeApi.getMembersList().then(res => {
        console.log(res)
        this.memberList = res.data.data
     })
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 170px;
}
.top-card {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.content-label {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 180px;
}
.content-label-title {
  font-size: 25px;
}
.content-label-num {
  margin-top: 30px;
  font-size: 20px;
}
.content-chart {
  height: 100%;
}
.table-card-table {
  margin-top: 20px;
  height: 520px;
}
.table-card {
  margin-top: 20px;
  height: 250px;
}
.chart-wrapper {
  height: 250px;
  width: 100%;
}
.table-card-tow {
  margin-top: 20px;
  height: 250px;
}
.table-card-tow-wrapper {
  display: flex;
  width: 100%;
  height: 250px;
}
.left {
  flex: 1;
  width: 50%;
  height: 250px;
}
.right {
  flex: 1;
  width: 50%;
  height: 250px;
}
</style>

4.语言包配置

en.js

export const lang = {
  music: 'Music', // 音乐
  // 首页头部
  chinese: 'Chinese', // 中文
  engLish: 'English', // 英文
  personal: 'personal', // 个人中心
  logout: 'logout', // 退出
  // 操作提示
  tip: 'Tip', // 提示
  optSuccess: 'The operation was successful!', // 操作成功
  // 首页内容
  newMembers: 'New Members', // 新增会员
  getCoupons: 'Get Coupons', // 领取券数
  memIntegral: 'Member Integral', // 新增积分
  registerUser: 'Registered Users', // 注册用户
  // 首页表格
  month: 'month'
}

zh.js

export const lang = {
  music: '网易云音乐',
  // 首页头部
  chinese: '中文',
  engLish: '英文',
  personal: '个人中心',
  logout: '退出',
  // 提示操作等模块
  tip: '提示',
  optSuccess: '操作成功！',
  // 首页内容
  newMembers: '新增会员',
  getCoupons: '领取券数',
  memIntegral: '新增积分',
  registerUser: '注册用户',
  // 首页表格
  month: '月份'
}

6.效果展示

• 中文
  
• 英文