### 基于 Element-ui 的业务二次封装组件

引入并使用

• ① import QlUi from 'qll-ui'

• ② import 'qll-ui/lib/ql-ui.css'

• ③ Vue.use(QlUi)

• ④ yarn add qll-ui --save

常见问题

如果部分项目有报错提示语法错误 ❎:如:Module parse failed: Unexpected token (1:2750)You may need an appropriate loader

①安装需要的 loader yarn add babel-loader @babel/core @babel/preset-env
--save-dev
② vue.config.js 配置如下
module.exports = { chainWebpack: config => {
  config.module .rule('js') .test(/.js$/) .exclude .add(/node_modules/) .end()
.use('babel-loader') .loader('babel-loader') .options({ presets:
['@babel/preset-env'] }) .end();
config.module .rule('umd-files').test(/ql-ui\.umd\.min\.js$/).use('babel-loader').loader('babel-loader') .options({ presets:
['@babel/preset-env'] }) .end();
}

table 表格

    1.动态配置表头和支持合并表头 ✅
    2.支持多选selection ✅
    3.相关常用基本表格配置 ✅
    4.表头列和表格行可拖拽 ✅
    5.普通列支持自定义内容的插槽，不支持数据绑定,操作列支持各种操作定义内容 具名插槽+作用域插槽 ✅
    6.分页配置 ✅

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :-------------------: | :------------------------------------: | :-----------------------------------------------------------------: | :----: | :----: | | tableHeader | 设置动态列明 | {label:列明,props:绑定的值,width:列宽,type:类型 radio,input,select) | | | | tableBody | 表格数据 | 根据表头字段传数据(见下面 👇 事例) | | | | tableConfig | 表格配置 | (见下面 👇 事例) | | | | handleSelectionChange | 多选事件 | event(返回选中数据) | | | | handleSizeChange | 分页 size 事件 | event(返回 size 值) | | | | handleCurrentChange | 分页 current 事件 | event(返回 current 值) | | | | handleColumnDropEnd | 列拖拽事件(需要表格配置设置允许列拖拽) | event(返回拖拽后的列数据) | | | | handleRowDropEnd | 行拖拽事件(需要表格配置设置允许行拖拽) | event(返回拖拽后的行数据) | | |

举个 🌰 子:

<ql-jz-table
  :tableHeader="tableHeader"
  :tableBody="tableBody"
  :tableConfig="tableConfig"
  @handleSelectionChange="handleSelectionChange"
  @handleSizeChange="handleSizeChange"
  @handleCurrentChange="handleCurrentChange"
  @handleColumnDropEnd="handleColumnDropEnd"
  @handleRowDropEnd="handleRowDropEnd"
>
      <!-- 普通列个性化内容 -->
      <template v-slot:tableitem="{ data }">
        <!-- 仅支持数据展示，不支持修改的修改 ps:tip查了一下好像不能修改作用域传过来的对象 -->
        <el-input
          v-model="data.address"
          size="mini"
          v-if="data.type == 'slot' && data.prop == 'address'"
        ></el-input>
      </template>
​      <!-- 使用具名插槽(插入特定位置) + 作用域插槽(获取值)  轻松自定义内容和数据 -->
      <template v-slot:opt="{ row }">
        <el-button size="mini" @click="getRow(row)">转诊</el-button>
        <el-button size="mini" @click="getRow2(row)">停诊</el-button>
        <el-button size="mini" @click="getRow3(row)">结束就诊</el-button>
        <el-button size="mini" @click="getRow4(row)">出科</el-button>
      </template>
​    </ql-jz-table>

// 列数据 export const tableHeader = [ { label: "姓名", prop: "name", width: "",
type: "switch", }, { label: "年龄", prop: "age", width: "", sortable: true,
sortMethod: (a, b) => { //自定义排序 return a.age - b.age; }, // type: "radio",
// columnList: [ // { label: "10", value: 10 }, // { label: "20", value: 20 },
// { label: "30", value: 30 }, // { label: "40", value: 40 }, // ], }, { label:
"家乡", prop: "home", width: "", type: "select", columnList: [ { label: "北京",
value: "beijing" }, { label: "上海", value: "shanghai" }, { label: "广州",
value: "guangzhou" }, { label: "深圳", value: "shenzhen" }, ], }, { label:
"爱好", prop: "hobby", width: "", children: [ { label: "邮编", prop: "zip",
width: "", type: "slot", }, { label: "地址", prop: "address", width: "", type:
"slot", }, ], }, { label: "创建时间", prop: "createTime", type: "slot", }, {
label: "操作", prop: "opt", width: "", type: "operation", }, ]; //表格数据
export const tableBody = [ { id: 1, // 使用selection 必须有id值， name: "关羽",
age: 10, home: "荆州", hobby: "夺命一刀斩", zip: 123, address: "河北", phone:
"1234567890", email: "[email protected]", createTime: [], opt: "", }, { id: 2, name:
"张飞", age: 20, home: "shanghai", hobby: "夺命一刀斩", zip: 123, address:
"山西", phone: "1234567890", email: "[email protected]", createTime: [], opt: "", }, {
id: 3, // 使用selection 必须有id值， name: "赵云", age: 35, home: "荆州", hobby:
"夺命一刀斩", zip: 123, address: "河北", phone: "1234567890", email:
"[email protected]", createTime: [], opt: "", }, { id: 4, name: "马超", age: 40, home:
"shanghai", hobby: "夺命一刀斩", zip: 123, address: "山西", phone: "1234567890",
email: "[email protected]", createTime: [], opt: "", }, { id: 5, // 使用selection
必须有id值， name: "黄忠", age: 55, home: "荆州", hobby: "夺命一刀斩", zip: 123,
address: "河北", phone: "1234567890", email: "[email protected]", createTime: [], opt:
"", }, { id: 6, name: "刘备", age: 60, home: "shanghai", hobby: "夺命一刀斩",
zip: 123, address: "山西", phone: "1234567890", email: "[email protected]", createTime:
[], opt: "", }, ]; //表格配置项 export const tableConfig = { stripe: false,
//斑马纹 border: true, //边框 height: 600, //单位px，表格默认高度 maxHeight:
800, //单位px，表格的最大高度 selection: true, //是否可以多选 pagination: true,
//分页 columnTransverse: true, // 列左右拖拽,api:handleColumnDropEnd(list)
list回调后的新列 rowDirection: true, // 行上下拖拽 api:handleRowDropEnd(list)
list回调后的新行数据 paginationConfig: { //分页配置 pageSizes: [10, 20, 30, 40],
pageSize: 10, total: 100, currentPage: 1, layout: "total, sizes, prev, pager,
next, jumper", paginationStyle: {}, }, headerCellStyle: { // 设置表头样式
height: "48px", background: "#FAFAFA", color: "#333333", fontWeight: "bold",
fontSize: "14px", }, };

formSearch 表格表单头部搜索 🔍

    1.支持动态配置左侧搜索，右侧操作自定义内容 ✅
    2.支持左右两列做搜索项，右操作按钮等布局 ✅

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :--------: | :--------------------: | :----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------: | :------: | | layout | 设置普通布局和左右布局 | string | 'normal','spaceBetween' | 'normal' | | formSize | 设置表单元素尺寸 | string | 'small','mini','medium' | 'medium' | | paramsList | 表头搜素项 | {} | type:'radio'，'checkbox'，'input'，'select'，'switch'，'datetimerange'，'daterange'，dataList:列表数据，prop:绑定字段，label:表单 label，defaultVal:默认值 | |

  <ql-jz-form-search
      layout="normal"
      ref="formSearch"
      formSize="mini"
      :paramsList="paramsList"
    >
      <template v-slot:opt>
        <el-button @click="handleSearch" size="mini">查询</el-button>
        <el-button @click="handleExport" size="mini">导出</el-button>
        <el-button @click="handleImport" size="mini">导入</el-button>
      </template>
    </ql-jz-form-search>

  // paramsList参数示例
   paramsList: [
        {
          type: "input",
          label: "姓名",
          placeholder: "请输入姓名",
          prop: "name",
          defaultVal: "",
        },
        {
          type: "select",
          label: "地点",
          placeholder: "请选择地点",
          prop: "address",
          defaultVal: [],
          dataList: [
            {
              label: "上海",
              value: "shanghai",
            },
            {
              label: "北京",
              value: "beijing",
            },
          ],
        },
        {
          type: "checkbox",
          label: "爱好",
          placeholder: "请选择地点",
          prop: "hoby",
          defaultVal: [],
          dataList: [
            {
              label: "篮球",
              value: "basketball",
            },
            {
              label: "足球",
              value: "football",
            },
          ],
        },
        {
          type: "switch",
          label: "开关",
          placeholder: "请选择地点",
          prop: "switch",
          defaultVal: false,
        },
        {
          type: "datetimerange",
          label: "日期",
          placeholder: "请选择日期",
          prop: "date",
          defaultVal: [],
        },
        {
          type: "daterange",
          label: "时间",
          placeholder: "请选择时间",
          prop: "date2",
          defaultVal: [],
        },
      ],