MIXINS使用

---

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

文件说明

我们目前配置了三个js文件来针对不同数据表格的操作来使用，其文件说明如下图：

使用方法

在页面引入需要的混合js文件，然后在按钮上绑定对应js里面定义的方法。 下面以单表为例：

<template>
    <a-card :bordered="false">
        <tool-bar @search="$refs.table.refresh(true)" @reset="() => {this.queryParam = {},$refs.table.refresh(true)}">
          <template slot="toolBtn" slot-scope="scope">
            <a-button class="cu-btn-success" icon="plus" @click="handleAdd()">新增</a-button>
            <a-button class="cu-btn-primary" icon="edit" @click="handleEdit('all')">编辑</a-button>
            <a-button class="cu-btn-danger" icon="delete" @click="handleSub('all')">删除</a-button>
          </template>
          <template slot="toolForm">
            <a-form-item label="" >
              <a-input v-model="queryParam.name" placeholder="name"/>
            </a-form-item>
          </template>
        </tool-bar>
        <s-table ref="table" size="default" :columns="columns" :data="loadData" bordered :rowClassName="rowClassName" :customRow="rowClick">
            <span slot="action" slot-scope="text, record">
                <template>
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="handleSub(record)">删除</a>
                </template>
            </span>
        </s-table>
    </a-card>
</template>
<script>
import { simpleListMixin } from '@/mixins/simpleListMixin'  //引入单表的js
import { STable} from '@/components'
const columns = [
....
    {
        title: '操作',
        width: 150,
        dataIndex: 'action',
        align: 'center',
        scopedSlots: {
            customRender: 'action'
        }
    }
]
export default {
    name: 'TableList',
    mixins: [simpleListMixin],        //声明引用的js对象
    components: { STable, editForm },
    data() {
        this.columns = columns
        return {
            ····
            url: {      //定义请求地址
                getPageSet: '/system/testDemo/getPageSet',
                save: '/system/testDemo/save',
                update: '/system/testDemo/update',
                deleteBatch: '/system/testDemo/deleteBatch'
            }    
        }
    },
    methods: { }
}
</script>

Js定义的方法如下，具体请查看src/mixins/simpleListMixin.js