Vue之mixins使用

/**
 *
 * 使用混入 - 把公共使用到的一些参数和方法提取出来，减少冗余，方便维护
 *
 * 特点:
 * 1.可以定义共用变量,相当于扩展了父组件的对象与方法,
 *   各个变量是相互独立的,参数和方法在各组件中不共享,值的修改在各个组件中不会相互影响
 * 2.引入mixins后组件会对其进行合并,在发生冲突时以组件数据优先(组件内的参数和方法会优先覆盖)
 * 3.可以定义data、components、methods 、created、computed等属性(非html代码)
 *
 * 使用方法:
 *  第一步：引入
 *  import { table } from "@/mixins/table.js";
 *  第二步：放入组件里
 *  export default {
 *    mixins: [myMixins],
 *    data() {
 *      return {}
 *    }
 *  }
 *
 *  使用建议:
 *  1.页面list请求数据的方法名定义成 getListData,
 *    这样在点击翻页的时候，table.js会自动调用父页面的getListData方法请求数据
 */
export const table = {
  data() {
    return {
      startRow: 1, // 表格的序号
      clickRow: {}, // 点击的某一行数据
      rowIndex: -1, // 点击的某一行序号
      columnIndex: 0, // 默认选择第0列

      list: [], // 列表数据数据
      listLoading: false, // loading标记
      // 列表数据查询参数
      selectForm: {
        total: 0,
        pageNums: 20,
        pageStart: 1,
      },
    }
  },
  methods: {
    headerClick(column, event) {
      // 获取点击的第几列
      this.columnIndex = column.index;
    },
    handleRow(row, column, event) {
      // 获取点击的第几行
      this.rowIndex = this.rowIndex == row.index ? -1 : row.index;
      this.clickRow = this.rowIndex == -1 ? {} : row;
    },
    tableRowClassName({ row, rowIndex }) {
      if (this.rowIndex == row.index) {
        return "nowRow";
      }
    },
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
      if (this.columnIndex == columnIndex) {
        return "selectdColumn";
      }
    },
    handleSizeChange(val) {
      this.selectForm.pageNums = val;
      // 调用的是父组件的方法 如果父组件有的话,会调用
      if(this.getListData){
        this.getListData();
        this.setCurrentRow();
      }
    },
    handleCurrentChange(val) {
      this.selectForm.pageStart = val;
      // 调用的是父组件的方法 如果父组件有的话,会调用
      if(this.getListData){
        this.getListData();
        this.setCurrentRow();
      }
    },
    // 翻页的时候把值初始化 - 默认没有选中行
    setCurrentRow(){
      this.$nextTick(()=>{
        this.rowIndex = -1
        this.clickRow = {}
      })
    },
  }
}

父组件

<template>
  <div>
    <el-table
      ref="table"
      @header-click="headerClick"
      @row-click="handleRow"
      :row-class-name="tableRowClassName"
      :cell-class-name="tableCellClassName"
      stripe
      v-loading="listLoading"
      element-loading-text="Loading"
      :data="list"
      border
      highlight-current-row
    >
      <el-table-column align="" label="序号" width="80">
        <template slot-scope="scope">
          {{ scope.row.index + startRow }}
        </template>
      </el-table-column>
      <el-table-column align="" prop="id" label="用户ID" width="200" >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column align="" prop="mobileNo" label="手机号" width="150" />
      <el-table-column label="实名状态" width="120">
        <template slot-scope="scope">
          {{ (scope.row.realAuth) }}
        </template>
      </el-table-column>
      <el-table-column label="区块链状态" width="120">
        <template slot-scope="scope">
          {{ [scope.row.blockchainState] }}
        </template>
      </el-table-column>
      <el-table-column align="" prop="articleCount" label="藏品数量" width="150" />
      <el-table-column align="" prop="payAmount" label="已购金额(元)" width="150" >
        <template slot-scope="scope">
          {{ (scope.row.payAmount) && (scope.row.payAmount).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column align="" prop="welfareAmount" label="已捐金额(元)" width="150" >
        <template slot-scope="scope">
          {{ (scope.row.welfareAmount) && (scope.row.welfareAmount).toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column align="" prop="collectionAccount" label="收款账号(支付宝)" width="" />
      <el-table-column align="" prop="createTime" label="注册时间" width="150" />
    </el-table>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="selectForm.pageStart"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="selectForm.pageNums"
      layout="total, prev, pager, next"
      :total="selectForm.total"
    >
    </el-pagination>

  </div>
</template>

<script>
import { table } from "@/mixins/table.js";
import {queryPersonalUserInfoForPage} from "@/api/registUser";
export default {
  mixins: [table],
  data() {
    return {

    };
  },
  created() {
    this.getListData()
  },
  methods:{
    getListData(isCheck) {
      this.listLoading = true;
      queryPersonalUserInfoForPage(this.selectForm)
        .then((res) => {
          if (res.status != 0) {
            this.$message.error(res.msg);
            return;
          }
          this.startRow = res.data.startRow;
          this.list = res.data.list;
          this.selectForm.total = res.data.total;
        })
        .catch((err) => {
          this.$message.error(err || err.msg);
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
  }
};
</script>

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