使用mixin 做page分页和selection多选

mixin文件夹创建三个文件一个index.js 一个pagination.js 一个selection.js

index.js

export {default as pagination} from './pagination'
export {default as selection} from './selection'

pagination.js

export default {
  data () {
    return {
      page_params: {
        page: 1,
        size: 10,
        total: 0,
        keyword: '',
        handleCurrentChange: this.handleCurrentChange,
        handleSizeChange: this.handleSizeChange
      }
    }
  },
  activated () {
    if (this.$store.state.search_flag) {
      this.page_params.keyword && (this.page_params.keyword = '')
    }
    this.getList && this.getList()
  },
  methods: {
    // 分页
    handleCurrentChange (pageId) {
      this.page_params.page = pageId
      this.getList()
    },
    // 分页size
    handleSizeChange (pageSize) {
      this.page_params.page = 1
      this.page_params.size = pageSize
      this.getList()
    },
    // 搜索
    goSearch (is) {
      this.page_params.page = 1
      this.page_params.size = 10
      this.getList(is)
    }
  }
}

selection.js

// 带复选框的el-table需要添加的属性和事件
// @selection-change="selectionChange"
// @row-click="rowClick"
// ref="table"
export default {
  data() {
    return {
      selection: [], // 选中的数据
      format_selection: [], // 格式化后的选中数据
      void_disabled: true, // 没有元素被选中时，按钮的禁用状态
      setOnSelf_disabled: true, // 设置上架按钮禁用状态
      audit_disabled: true // 设置审核按钮禁用状态
    }
  },
  methods: {
    // 勾选复选框
    selectionChange(selection) {
      this.selection = selection
      this.void_disabled = !selection.length
    },
    // 点击行自动勾选复选框
    rowClick(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    // 反选
    antiSelection() {
      this.$refs.table.data.forEach(row => {
        this.$refs.table.toggleRowSelection(row)
      })
    },
    // 格式化选择框数据
    formatData(attr) {
      this.format_selection = []
      this.selection.forEach(item => {
        this.format_selection.push(item[attr])
      })
    },
    // 删除确认框
    deleteSelection() {
      this.$confirm(this.$t('confirmToDelete') + '?', this.$t('tips'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.deleteData()
        })
        .catch(() => {})
    },
    // 成功提示
    successMsg(res) {
      this.$notify({
        title: this.$t('success'),
        message: res.tips,
        type: 'success'
      })
      this.getList()
    }
  }
}

使用

  import { pagination, selection } from '@/mixin'
  mixins: [pagination, selection],
    this.formatData('id')  // 拿id 参数 this.format_selection.join(',')
// 这是下面移除和反选
computed: {
    btn_list() {
      return [
        {
          name: 'Inverse',
          method: this.antiSelection
        },
        {
          name: 'remove',
          method: this.deleteSelection,
          disabled: this.void_disabled,
          loading: this.deleteSelectionLoading
        }
      ]
    }
  },