vue3.0 通用管理页面封装

bmTable使用方法

<BmTable url="/project/list"
      :columns="columns"
      :formItem="formItem"
      :formConfig="formConfig"
      :isPagination="true"
      @postData="postData"
      @preData="preData"
      ref="bmTable">
    <template #bmSuffix>
      <div>
        <el-button type="success">新增</el-button>
      </div>
    </template>
  </BmTable>

export default {
  mixins: [IndexMixin],
  setup() {
    const bmTable = ref()
    const postData = (data)=> { return data; }
    const preData = (data)=> { return data; }
    return {
      postData,
      preData,
      bmTable
    }
  }
}

export default {
  data() {
    return {
      columns: [
        {
          prop: 'creatTime',
          label: '创建时间',
        },
        {
          prop: 'datas',
          label: '操作',
          labelWidth: 180,
          render: (item)=> {
            return <>
              <el-button link type="success" onClick={()=> { this.deletes(item); }}>删除</el-button>
            </>
            
          }
        }
      ],
      formItem: [
        {
          prop: 'created',
          label: '创建时间',
          el: 'el-input',
          placeholder: '123',
          defaultValue: 'test'
        },
        {
          prop: 'crea',
          label: '创建',
          el: 'el-select',
          data: [{label: '123', value: '1'}, {label: '3', value: '2'}],
          elOpt: 'el-option',
          placeholder: '123',
          defaultValue: '1'
        },
      ],
      formConfig: { }
    }
  },
}

参数

1. columns 表格列参数
2. formItem 页面搜索条件参数
3. formConfig 页面搜索内容配置参数
4. isPagination 是否前端分页
5. bmSuffix 插槽 页面操作按钮位置，如新增、批量下载、批量删除等操作

事件

1. postData 请求完成后对返回的数据处理事件
2. preData 请求前对请求参数处理事件

实现方案
原理：当我们存在多个组件中的数据或者功能很相近时，我们就可以利用 mixins 将公共部分提取出来，通过 mixins 封装函数，组件调用他们是不会改变函数作用域外部的。

注意事项

• 接口返回数据
  接口返回参数若后端分页时数据放入data.data.result， 前端分页时数据放入data.data

if (!isPagination) {
      tableData.list = onPostData ? onPostData(data.data) : data.data;
      tableData.data = tableData.list.slice(
        (tableData.pagination.page - 1) * tableData.pagination.pageSize,
        tableData.pagination.page * tableData.pagination.pageSize
      );
      tableData.pagination.total = tableData.list.length;
      return;
    }
    tableData.data = onPostData
      ? onPostData(data.data.result)
      : data.data.result;
    tableData.pagination.total = data.data.total;
  });