Vue国际化二 【在表格中的使用】

基础使用

 <el-button type="primary" size="small" plain @click="addClick()">{{$t("common.Add")}}</el-button>

  <el-table-column
        prop="sex"
        :label="$t('usersManager.Gender')"
        width="120"
        align="center"
        :formatter="formatterSex"
      />

活动表头的使用

computed:{
  tableHeader() {
      return [
        {
          label: this.$t("usersManager.Username"),
          prop: 'userName',
        },
        {
          label: this.$t("usersManager.Nickname"),
          prop: 'userNick'
        },
        {
          label: this.$t("usersManager.phonenumber"),
          prop: 'userMobile'
        },
        {
          label: this.$t("usersManager.mailbox"),
          prop: 'userEmail'
        }
      ]
    },

动态表格

<template>
  <div class="hlt-custom-table">
    <el-table
      ref="multipleTable"
      v-loading="loading"
      stripe
      highlight-current-row
      min-height="600px"
      :data="tableData"
      tooltip-effect="dark"
      style=" 100%"
      :row-class-name="tableRowClassName"
      element-loading-text="正在加载中..."
      :header-cell-style="{
        background: 'rgb(248,248,249)',
        color: 'rgb(31,45,61)',
        'text-align': 'center',
      }"
      border
      :cell-style="changeColor"
      @selection-change="changeFun"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="40"
        align="center"
        fixed="left"
      />
      <el-table-column
        type="index"
        width="45"
        align="center"
        label="ID"
        fixed="left"
      />
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :show-overflow-tooltip="true"
        min-width="50px"
        sortable
        align="center"
      />
      <slot />
    </el-table>
    <el-pagination
      :page-sizes="[10, 30, 50, 100]"
      :page-size="pagers.limit"
      layout="sizes, prev, pager, next"
      :total="pagers.total"
      style="float: right"
      class="pagination"
      background
      :current-page="pagers.page"
      @size-change="handleLimitChange"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableHeader: {
      type: Array,
      default: () => {
        return []
      }
    },
    pagers: {
      type: Object,
      default: () => ({})
    },
    selection: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      loading: false
    }
  },
  watch: {
    // 监控tableData数据是否为空，展示loading
    tableData(newValue, oldValue) {
      // 如果非数组
      if (!Array.isArray(newValue)) {
        throw new Error('tableData=>传入的值为非数组，请联系管理员')
        return
      }
      if (newValue.length === 0) {
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 500)
      } else {
        this.loading = false
      }
    },
    tableHeader(newValue, oldValue) {
      this.tableHeader = newValue
    }
  },

  methods: {
    // 复选框
    changeFun(val) {
      this.$store.commit('customTable/GET_CHECKBOX_DATA', val)
    },
    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    // 改变颜色
    changeColor(row) {
      if (row.column.label === '用户状态' && row.row.status === 0) {
        return 'color:#F56C6C' // 红色
      } else if (
        row.column.label === '用户身份' &&
        row.row.userIdentity === 1
      ) {
        return 'color:#9400D3'
      } else if (row.column.label === '状态' && row.row.rulesStatus === 0) {
        return 'color:#F56C6C'
      }

      //   if (identity
      //     (row.column.label == "证照状态" && row.row.certificateStatus == "3") ||
      //     (row.column.label == "证照状态" && row.row.certificateStatus == "1")
    },
    // 每页多少条
    handleLimitChange(val) {
      this.$emit('handleLimitChange', val)
    },
    // 当前页数
    handlePageChange(val) {
      this.$emit('handlePageChange', val)
    },
    //清空被选中的checkebox复选框
    clearCheked() {
      this.$refs.multipleTable.clearSelection()
    }
  }
}
</script>

<style>
.pagination {
  margin-top: 10px;
}
.el-table .warning-row {
  background: #ffff;
}

.el-table .success-row {
  background: #f0f9eb;
}
.hlt-custom-table {
  min-height: 700px;
  color: rgba(0, 0, 0, 0.85);
  padding: 20px 24px 0;
  background: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  font-feature-settings: "tnum", "tnum";
  font-variant: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, segoe ui, Roboto,
    helvetica neue, Arial, noto sans, sans-serif, apple color emoji,
    segoe ui emoji, segoe ui symbol, noto color emoji;
}
</style>