├── .gitignore ├── .npmignore ├── docs ├── assets │ ├── js │ │ ├── 18.a7bc7388.js │ │ ├── 13.c7c63a82.js │ │ ├── 2.22a86903.js │ │ ├── 8.d2d38cc4.js │ │ ├── 12.065f88c2.js │ │ ├── 9.580f0a1a.js │ │ ├── 11.cec23d57.js │ │ ├── 4.e468203b.js │ │ ├── 10.c2f99334.js │ │ ├── 7.7b062896.js │ │ ├── 14.387e9e69.js │ │ ├── 3.e5075e1d.js │ │ ├── 6.5b239157.js │ │ ├── 5.b2ef6a46.js │ │ └── 16.daed1b13.js │ ├── fonts │ │ ├── element-icons.732389de.ttf │ │ └── element-icons.535877f5.woff │ └── img │ │ └── search.83621669.svg ├── 404.html ├── index.html └── guide │ └── index.html ├── .idea └── vcs.xml ├── .babelrc ├── README.md ├── vuepressdocs ├── README.md ├── .vuepress │ ├── enhanceApp.js │ ├── config.js │ └── components │ │ ├── example │ │ ├── mtable │ │ │ ├── demo7.vue │ │ │ ├── demo4.vue │ │ │ ├── demo3.vue │ │ │ ├── demo6.vue │ │ │ ├── demo2.vue │ │ │ ├── demo5.vue │ │ │ ├── demo1.vue │ │ │ ├── demo.vue │ │ │ └── data.json │ │ ├── mselect │ │ │ └── demo.vue │ │ └── mform │ │ │ └── demo.vue │ │ └── demo-block │ │ └── index.vue └── guide │ ├── README.md │ ├── mselect.md │ ├── mform.md │ └── mtable.md ├── types └── index.d.ts ├── src ├── components │ ├── createTag.js │ ├── MForm.js │ ├── MSelect.js │ ├── MItem.js │ └── MTable.js ├── index.js └── utils │ ├── index.js │ └── export-csv.js ├── rollup.config.js ├── package.json └── dist └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | yarn.lock 4 | package-lock.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | rollup.config.js 3 | .babelrc 4 | .vscode 5 | /docs/ 6 | /vuepressdocs/ -------------------------------------------------------------------------------- /docs/assets/js/18.a7bc7388.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[18],{324:function(n,w,o){}}]); -------------------------------------------------------------------------------- /docs/assets/fonts/element-icons.732389de.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hyk51594176/mcommon/HEAD/docs/assets/fonts/element-icons.732389de.ttf -------------------------------------------------------------------------------- /docs/assets/fonts/element-icons.535877f5.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hyk51594176/mcommon/HEAD/docs/assets/fonts/element-icons.535877f5.woff -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/assets/img/search.83621669.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["external-helpers"] 12 | } 13 | 14 | -------------------------------------------------------------------------------- /docs/assets/js/13.c7c63a82.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[13],{336:function(t,n,e){"use strict";e.r(n);var s=e(1),c=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"content"})}),[],!1,null,null,null);n.default=c.exports}}]); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # 用法 3 | 4 | 基于element-ui封装的form表单和table 5 | 6 | >npm install @hanyk/mcommon 7 | 8 | ```javascript 9 | 10 | import Vue from 'vue' 11 | 12 | import mcommon from '@hanyk/mcommon' 13 | 14 | Vue.use(mcommon) 15 | ``` 16 | 17 | [示例文档](https://hyk51594176.github.io/mcommon/) -------------------------------------------------------------------------------- /vuepressdocs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | actionText: 快速上手 → 4 | actionLink: /guide/ 5 | features: 6 | - title: 简洁至上 7 | details: 以 element-ui 的表单和表格为基础进行二次封装，增强功能加少代码量 8 | - title: 配置简单 9 | details: 使用原有element 表单和表格的参数及事件。 10 | - title: API全部支持 11 | details: 支持所有的事件及参数 12 | footer: MIT Licensed | Copyright © 2018-present Evan You 13 | --- 14 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import elementUI from 'element-ui'; 2 | import mcommon from '../../src' 3 | import 'element-ui/lib/theme-chalk/index.css' 4 | import DemoBlock from './components/demo-block' 5 | 6 | export default ({Vue}) => { 7 | Vue.use(elementUI,{size:'small'}) 8 | Vue.use(mcommon) 9 | Vue.component('demo-block', DemoBlock) 10 | } -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare namespace Mcommon { 4 | interface mcommon { 5 | install(vue: typeof Vue): void 6 | MForm: VNode 7 | MItem: VNode 8 | MSelect: VNode 9 | MTable: VNode 10 | } 11 | } 12 | 13 | declare const Mcommon: Mcommon.mcommon 14 | 15 | export = Mcommon 16 | export as namespace Mcommon 17 | -------------------------------------------------------------------------------- /vuepressdocs/guide/README.md: -------------------------------------------------------------------------------- 1 | 2 | # 介绍 3 | mcommon 是基于elemen-ui封装的vue组件，[MSelect](mselect.html)、[MForm](mform.html)、[Mtable](mtable.html)，灵活的配置，强大的功能，能够大大提高前端同学的开发效率 4 | 5 | ## 安装 6 | ```bash 7 | npm install @hanyk/mcommon 8 | ``` 9 | 10 | ```js 11 | import Vue from 'vue' 12 | import elementUI from 'element-ui' 13 | 14 | import mcommon from '@hanyk/mcommon' 15 | Vue.use(elementUI) 16 | Vue.use(mcommon) 17 | ``` -------------------------------------------------------------------------------- /docs/assets/js/2.22a86903.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[2],{317:function(t,e,n){},320:function(t,e,n){"use strict";n(317)},335:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||i().default)}},p=(n(320),n(1)),r=Object(p.a)(i,void 0,void 0,!1,null,"099ab69c",null);e.default=r.exports}}]); -------------------------------------------------------------------------------- /src/components/createTag.js: -------------------------------------------------------------------------------- 1 | export default function (h, { column, row = {}, $index }) { 2 | let VNode = null 3 | const scopedSlots = this.scopedSlots || this.$scopedSlots 4 | const slots = this.slots && this.slots() 5 | 6 | if (scopedSlots && column.prop && scopedSlots[column.prop]) { 7 | VNode = scopedSlots[column.prop]({ row, column, $index }) 8 | } else if (slots && column.prop && slots[column.prop]) { 9 | VNode = slots[column.prop] 10 | } 11 | return VNode || h('MItem', { 12 | props: { 13 | row, 14 | column, 15 | $index 16 | } 17 | }) 18 | } 19 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import MForm from './components/MForm' 2 | import MItem from './components/MItem' 3 | import MSelect from './components/MSelect' 4 | import MTable from './components/MTable' 5 | const install = function(Vue) { 6 | if (install.installed) return 7 | if (!Vue.prototype.$ELEMENT) { 8 | throw new Error('请先安装element-ui') 9 | } 10 | Vue.component(MForm.name, MForm) 11 | Vue.component(MItem.name, MItem) 12 | Vue.component(MSelect.name, MSelect) 13 | Vue.component(MTable.name, MTable) 14 | install.installed = true 15 | } 16 | if (window && window.Vue) { 17 | install(window.Vue) 18 | } 19 | export default { 20 | install, 21 | MForm, 22 | MItem, 23 | MSelect, 24 | MTable 25 | } 26 | -------------------------------------------------------------------------------- /vuepressdocs/guide/mselect.md: -------------------------------------------------------------------------------- 1 | 2 | # MSelect 3 | 4 | ## 参数配置 5 | 以下字段为MSelect的默认配置、扩展事件和选项，其他配置和事件请参照[el-select](https://element.eleme.io/#/zh-CN/component/select) 6 | ### Props 7 | 8 | 字段|说明|类型|默认值 9 | -|-|-|- 10 | params|请求参数|object|{} 11 | valueKey|对应数据绑定和展示字段|Object|{ label: 'label', value: 'value' } 12 | dataList|下拉数据|array|[] 13 | getList|异步获取数据的方法,当dataList不为空时不执行该方法|promise|- 14 | filterable|是否可搜索|boolean| true 15 | clearable|是否可清楚|boolean| true 16 | customRender|自定义模版|Function|- 17 | ### Events 18 | 事件名称|说明|回调参数 19 | -|-|- 20 | selectList|当异步请求数据时成功回调|当前下拉数据 array 21 | currentObj|当前选中或清除时回调| 当前选中的数据 object、null 22 | 23 | ## 用法 24 | 25 | 26 | 27 | <<< @/vuepressdocs/.vuepress/components/example/mselect/demo.vue 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | base: "/mcommon/", 5 | title: "mcommon", 6 | description: "基于element-ui form、table二次封装，支持原table和form的所有功能。", 7 | dest: path.resolve(__dirname, "../../docs/"), 8 | themeConfig: { 9 | repo: "hyk51594176/mcommon", 10 | docsDir: "vuepress", 11 | nav: [ 12 | { 13 | text: "主页", 14 | link: "/" 15 | }, 16 | { 17 | text: "指南", 18 | link: "/guide/" 19 | } 20 | ], 21 | sidebar: { 22 | "/guide/": [ 23 | { 24 | title: "指南", 25 | collapsable: false, 26 | children: ["", "mselect", "mform", "mtable"] 27 | } 28 | ] 29 | } 30 | }, 31 | chainWebpack(config) { 32 | config.resolve.alias.set("@", path.resolve(__dirname, "../../src/")); 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /docs/assets/js/8.d2d38cc4.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[8],{330:function(a,t,n){"use strict";n.r(t);var o={data:function(){return{columns:[{prop:"id",label:"ID"},{prop:"name",label:"姓名"},{prop:"amount1",label:"数值1",sortable:!0},{prop:"amount2",label:"数值2",sortable:!0,isSummary:!0},{prop:"amount3",label:"数值3",sortable:!0,isSummary:!0,unit:"元",isCurrency:!0}],tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4",amount3:15}]}}},u=n(1),e=Object(u.a)(o,(function(){var a=this.$createElement;return(this._self._c||a)("m-table",{attrs:{tableData:this.tableData,columns:this.columns,showPage:!1,"sum-text":"总计"}})}),[],!1,null,null,null);t.default=e.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/12.065f88c2.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[12],{334:function(a,t,n){"use strict";n.r(t);var o={data:function(){return{columns:[{prop:"id",label:"ID"},{prop:"name",label:"姓名"},{prop:"amount1",label:"数值1"},{prop:"amount2",label:"数值2"},{prop:"amount3",label:"数值3"}],tableData:[{id:"12987122",name:"王小虎1",amount1:"234",amount2:"3",amount3:10},{id:"12987123",name:"王小虎2",amount1:"165",amount2:"4",amount3:12},{id:"12987124",name:"王小虎3",amount1:"324",amount2:"1",amount3:9},{id:"12987125",name:"王小虎4",amount1:"621",amount2:"2",amount3:17},{id:"12987126",name:"王小虎5",amount1:"539",amount2:"4",amount3:15}]}},methods:{dropChange:function(a){this.tableData=a}}},e=n(1),u=Object(e.a)(o,(function(){var a=this.$createElement;return(this._self._c||a)("m-table",{attrs:{tableData:this.tableData,columns:this.columns,showPage:!1,"row-key":"id",drop:""},on:{"drop-change":this.dropChange}})}),[],!1,null,null,null);t.default=u.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/9.580f0a1a.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[9],{331:function(a,t,n){"use strict";n.r(t);var e={data:function(){return{mergeColumn:["amount1"],mergeRow:["name"],columns:[{prop:"id",label:"ID"},{prop:"name",label:"姓名"},{prop:"amount1",label:"数值1",sortable:!0},{prop:"amount2",label:"数值2",sortable:!0},{prop:"amount3",label:"数值3",sortable:!0}],tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4",amount3:15}]}}},o=n(1),m=Object(o.a)(e,(function(){var a=this.$createElement;return(this._self._c||a)("m-table",{attrs:{tableData:this.tableData,columns:this.columns,showPage:!1,showNum:!1,"merge-row":this.mergeRow,"merge-column":this.mergeColumn}})}),[],!1,null,null,null);t.default=m.exports}}]); -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | 2 | import babel from 'rollup-plugin-babel' 3 | import uglify from 'rollup-plugin-uglify' 4 | import createBanner from 'create-banner' 5 | import changeCase from 'change-case' 6 | import alias from 'rollup-plugin-alias' 7 | import path from 'path' 8 | const resolve = p => path.resolve(__dirname, p) 9 | const pkg = require('./package') 10 | const name = changeCase.pascalCase(pkg.name.replace('@hanyk/', '')) 11 | const banner = createBanner({ 12 | data: { 13 | name: `${name}.js`, 14 | year: '2018-present' 15 | } 16 | }) 17 | export default { 18 | input: 'src/index.js', 19 | output: { 20 | banner, 21 | file: 'dist/index.js', 22 | format: 'umd', 23 | name: 'mcommon', 24 | globals: { 25 | 'Sortable': 'Sortable' 26 | } 27 | }, 28 | cache: true, 29 | external: [ 30 | 'sortablejs' 31 | ], 32 | plugins: [ 33 | alias({ 34 | '@': resolve('src') 35 | }), 36 | babel({ 37 | exclude: 'node_modules/**' // 排除引入的库 38 | }), 39 | uglify() 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /docs/assets/js/11.cec23d57.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{333:function(t,a,e){"use strict";e.r(a);var n={data:function(){return{columns:[{prop:"id",label:"ID"},{prop:"name",label:"姓名"},{prop:"amount1",label:"数值1",sortable:!0},{prop:"amount2",label:"数值2",sortable:!0},{prop:"amount3",label:"数值3",sortable:!0}],tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"3",amount3:12},{id:"12987124",name:"王小虎",amount2:"3",amount1:"324",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4",amount3:15}]}},methods:{exportExcel:function(){this.$refs.mtable.exportCsv({filename:"导出excel"})}}},o=e(1),l=Object(o.a)(n,(function(){var t=this.$createElement,a=this._self._c||t;return a("div",[a("el-button",{attrs:{type:"primary"},on:{click:this.exportExcel}},[this._v("导出excel")]),this._v(" "),a("m-table",{ref:"mtable",attrs:{tableData:this.tableData,columns:this.columns,showPage:!1,showNum:!1}})],1)}),[],!1,null,null,null);a.default=l.exports}}]); -------------------------------------------------------------------------------- /vuepressdocs/guide/mform.md: -------------------------------------------------------------------------------- 1 | 2 | # MForm 3 | 4 | ## 参数配置 5 | 以下字段为MForm扩展配置，其他配置和事件请参照[el-form](https://element.eleme.io/#/zh-CN/component/form) 6 | 字段|说明|类型|默认值 7 | -|-|-|- 8 | elRow|[el-row](https://element.eleme.io/#/zh-CN/component/row)的props配置|object|- 9 | noWrap|是否响应式换行|boolean|- 10 | columns|form的每个组件配置|Array|- 11 | 12 | ### columns 示例 13 | ```js 14 | [ 15 | { 16 | label:'姓名', // 对应 form-item label 17 | el:'el-input', // 要渲染的elementUI组件 可以省略el 直接写el:'input',不写该字段默认会渲染成 span h('span',null,当前model对应prop字段的值) 18 | render(h){}, // 可自定义渲染需要的组件，当el启用时，该字段不启用 19 | prop:'name', // 对应 form mode字段需要绑定的key 20 | slots:{ // 可选插槽 对应 要渲染的组件的插槽 21 | ...// 22 | prepend(h){ 23 | reutrn h('button',null,'test') 24 | } 25 | }, 26 | listeners:{ // 可选监听事件 对应 要渲染的组件所有的事件名称，具体请看 elementui 文档 27 | change(e){ 28 | 29 | } 30 | }, 31 | rules:{ // el-form-item 的验证 32 | 33 | }, 34 | getColumn(obj){ 35 | 36 | },//返回colum 来进行合并 37 | ... //其他 可选props 包括 要渲染组件的props, el-form-item 对应的props,el-col对应props，都可以定义在当前对象中 38 | } 39 | ] 40 | ``` 41 | 42 | 43 | ## 用法 44 | 45 | 46 | 47 | <<< @/vuepressdocs/.vuepress/components/example/mform/demo.vue 48 | -------------------------------------------------------------------------------- /docs/assets/js/4.e468203b.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[4],{319:function(a,e,o){},323:function(a,e,o){"use strict";o(319)},329:function(a,e,o){"use strict";o.r(e);var s={data:function(){return{columns:[{label:"商品名称",prop:"name"},{label:"所属店铺",prop:"shop"},{label:"商品 ID",prop:"id"},{label:"店铺 ID",prop:"shopId"},{label:"商品分类",prop:"category"},{label:"店铺地址",prop:"address"},{label:"商品描述",prop:"desc",span:22}],tableData:{column:[{prop:"id",label:"ID"},{prop:"name",label:"商品名称"},{prop:"desc",label:"描述"}],data:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}]}}}},l=(o(323),o(1)),t=Object(l.a)(s,(function(){var a=this,e=a.$createElement,o=a._self._c||e;return o("m-table",{attrs:{columns:a.tableData.column,"table-data":a.tableData.data,expand:"",showNum:!1,border:!1},scopedSlots:a._u([{key:"expand",fn:function(e){var s=e.row;return[o("m-form",{staticClass:"demo-table-expand",attrs:{model:s,columns:a.columns}})]}}])})}),[],!1,null,null,null);e.default=t.exports}}]); -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | 2 | export const getType = (o) => { 3 | return Object.prototype.toString.call(o).slice(8, -1) 4 | } 5 | export const isDiff = (o1 = null, o2 = null, key = null) => { 6 | if (o1 === o2) return false 7 | if (getType(o1) !== getType(o2)) return true 8 | if (o1 === null || o2 === null) return true 9 | if (getType(o1) === 'Array') { 10 | if (o1.length !== o2.length) return true 11 | return o1.some((item, index) => isDiff(item, o2[index], key)) 12 | } 13 | if (getType(o1) === 'Object') { 14 | return key ? o1[key] !== o2[key] : Object.keys(o1).some((k) => isDiff(o1[k], o2[k], key)) 15 | } 16 | if (getType(o1) === 'Date') return o1.getTime() !== o2.getTime() 17 | return true 18 | } 19 | 20 | export const currency = (value = 0, currency = '¥', decimals = 2) => { 21 | const digitsRE = /(\d{3})(?=\d)/g 22 | value = parseFloat(value) 23 | if (!isFinite(value) || (!value && value !== 0)) return '' 24 | const stringified = Math.abs(value).toFixed(decimals) 25 | const _int = decimals ? stringified.slice(0, -1 - decimals) : stringified 26 | const i = _int.length % 3 27 | const head = i > 0 ? _int.slice(0, i) + (_int.length > 3 ? ',' : '') : '' 28 | const _float = decimals ? stringified.slice(-1 - decimals) : '' 29 | const sign = value < 0 ? ' -' : ' ' 30 | return ( 31 | currency + sign + head + _int.slice(i).replace(digitsRE, '$1,') + _float 32 | ) 33 | } 34 | -------------------------------------------------------------------------------- /src/components/MForm.js: -------------------------------------------------------------------------------- 1 | import createTag from './createTag' 2 | const defaultWidth = '100px' 3 | const createRow = function (h) { 4 | const { columns = [], elRow } = this.props 5 | return h('el-row', { 6 | props: elRow 7 | }, columns.map(column => createCol.call(this, h, column))) 8 | } 9 | 10 | const createCol = function (h, column) { 11 | let xs = { span: 24 } 12 | const { noWrap, model, formData, labelWidth } = this.props 13 | if (noWrap) { 14 | xs = {} 15 | } 16 | return h('el-col', { 17 | props: { 18 | span: 11, 19 | xs, 20 | ...column 21 | }, 22 | key: column.prop 23 | }, [h('el-form-item', { 24 | props: { 25 | ...column, 26 | labelWidth: (!column.label && !column.labelWidth) ? '10px' : column.labelWidth || labelWidth 27 | } 28 | }, [createTag.call(this, h, { 29 | column, 30 | row: model || formData 31 | })])]) 32 | } 33 | 34 | export default { 35 | functional: true, 36 | name: 'MForm', 37 | props: { 38 | formData: Object, 39 | columns: Array, 40 | model: Object, 41 | elRow: Object, 42 | noWrap: Boolean 43 | }, 44 | render (h, context) { 45 | if (context.props.formData) { 46 | context.data.attrs.model = context.props.formData 47 | } 48 | if (!context.data.attrs.labelWidth) { 49 | context.data.attrs.labelWidth = defaultWidth 50 | } 51 | return h('el-form', context.data, [createRow.call(context, h)]) 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /docs/assets/js/10.c2f99334.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[10],{332:function(t,n,e){"use strict";e.r(n);e(42);var o={data:function(){return{columns:[{prop:"id",label:"ID"},{prop:"name",label:"姓名",getColumn:function(t){return{el:t.edit?"input":null}}},{prop:"amount1",label:"数值1",sortable:!0},{prop:"amount2",label:"数值2",sortable:!0,getColumn:function(t){return{el:t.edit?"input":null}}},{prop:"amount3",label:"数值3",sortable:!0},{label:"操作",prop:"btn"}],tableData:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3",edit:!1,amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"3",edit:!1,amount3:12},{id:"12987124",name:"王小虎",amount2:"3",amount1:"324",edit:!1,amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2",edit:!1,amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4",edit:!1,amount3:15}]}},methods:{edit:function(t){t.edit=!0,t._copyObj=JSON.stringify(t)},save:function(t){t.edit=!1,delete t._copyObj},cancel:function(t){Object.assign(t,JSON.parse(t._copyObj),{edit:!1}),delete obj._copyObj}}},a=e(1),u=Object(a.a)(o,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("m-table",{attrs:{tableData:t.tableData,columns:t.columns,showPage:!1,showNum:!1},scopedSlots:t._u([{key:"btn",fn:function(n){return[n.row.edit?e("el-button",{attrs:{type:"text"},on:{click:function(e){return t.save(n.row)}}},[t._v("保存")]):e("el-button",{attrs:{type:"text"},on:{click:function(e){return t.edit(n.row)}}},[t._v("编辑")]),t._v(" "),n.row.edit?e("el-button",{attrs:{type:"text"},on:{click:function(e){return t.cancel(n.row)}}},[t._v("取消")]):t._e()]}}])})}),[],!1,null,null,null);n.default=u.exports}}]); -------------------------------------------------------------------------------- /docs/assets/js/7.7b062896.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[7],{328:function(e,t,n){"use strict";n.r(t);n(49);var a={data:function(){this.$createElement;return{tableData:[],columns:[{prop:"date",fixed:!0,sortable:!0,width:"120",renderHeader:function(e,t){return e("span",[e("i",{class:"el-icon-time"}),"日期"])}},{label:"配送信息",children:[{prop:"name",width:"120",render:function(e,t){return e("el-tag",[t.row.name])}},{label:"地址",children:[{prop:"province",label:"省份",width:"120"},{prop:"city",label:"市区",width:"120"},{prop:"address",label:"地址",sortable:!0,width:"300px",renderHeader:function(e,t){return e("span",[e("i",{class:"el-icon-location-outline"}),"地址"])}}]}]}]}},created:function(){for(var e=0;e<10;e++)this.tableData.push({date:"2016-05-".concat(e+1),name:"王小虎".concat(e+1),province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 ".concat(e+1," 弄"),zip:200333})},methods:{selectChange:function(e){console.log(e)},toggleSelection:function(e){e?this.$refs.mtable.toggleRowSelection(e):this.$refs.mtable.clearSelection()}}},l=n(1),o=Object(l.a)(a,(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("m-table",{ref:"mtable",attrs:{"table-data":e.tableData,columns:e.columns,showPage:!1,selection:"",height:"400",showNum:!1},on:{"selection-change":e.selectChange},scopedSlots:e._u([{key:"date",fn:function(t){return[e._v(e._s(t.row.date))]}}])}),e._v(" "),n("br"),e._v(" "),n("el-button",{on:{click:function(t){return e.toggleSelection([e.tableData[1],e.tableData[2]])}}},[e._v("切换第二、第三行的选中状态")]),e._v(" "),n("el-button",{on:{click:function(t){return e.toggleSelection()}}},[e._v("取消选择")])],1)}),[],!1,null,null,null);t.default=o.exports}}]); -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo7.vue: -------------------------------------------------------------------------------- 1 | 4 | 76 | -------------------------------------------------------------------------------- /docs/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mcommon 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

404

How did we get here?
Take me home.
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo4.vue: -------------------------------------------------------------------------------- 1 | 7 | 77 | 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@hanyk/mcommon", 3 | "version": "1.7.9", 4 | "description": "mTable,mForm,mItem 基于element-ui 二次封装的table和form组件", 5 | "main": "dist/index.js", 6 | "typings": "types/index.d.ts", 7 | "scripts": { 8 | "build": "rollup -c", 9 | "release": "npm run build && npm run pub", 10 | "pub": "npm publish --access public", 11 | "docs:dev": "vuepress dev vuepressdocs", 12 | "docs:build": "vuepress build vuepressdocs" 13 | }, 14 | "author": "51594176@qq.com", 15 | "license": "MIT", 16 | "keywords": [ 17 | "vue", 18 | "element-ui", 19 | "mTable", 20 | "mItem", 21 | "mForm" 22 | ], 23 | "engines": { 24 | "node": ">=4", 25 | "npm": ">=3" 26 | }, 27 | "homepage": "https://github.com/hyk51594176/mcommon", 28 | "devDependencies": { 29 | "babel-core": "^6.26.3", 30 | "babel-plugin-external-helpers": "^6.22.0", 31 | "babel-preset-env": "^1.7.0", 32 | "babel-preset-stage-2": "^6.24.1", 33 | "change-case": "^3.0.2", 34 | "create-banner": "^1.0.0", 35 | "element-ui": "^2.7.0", 36 | "sass": "^1.40.0", 37 | "rollup": "^0.59.4", 38 | "rollup-plugin-alias": "^1.5.1", 39 | "rollup-plugin-babel": "^3.0.7", 40 | "rollup-plugin-uglify": "^3.0.0", 41 | "sass-loader": "^7.1.0", 42 | "vuepress": "^0.14.10", 43 | "webpack-dev-middleware": "3.6.0", 44 | "core-js": "^2.6.12", 45 | "vue-loader": "^16.3.3", 46 | "vue-style-loader": "^4.1.3", 47 | "vue-template-compiler": "^2.6.14", 48 | "webpack-hot-client": "^4.2.0" 49 | }, 50 | "resolutions": { 51 | "webpack-dev-middleware": "3.6.0" 52 | }, 53 | "publishConfig": { 54 | "registry": "https://registry.npmjs.org/" 55 | }, 56 | "dependencies": { 57 | "sortablejs": "^1.10.0-rc3" 58 | }, 59 | "prettier": { 60 | "singleQuote": true, 61 | "semi": false, 62 | "printWidth": 180, 63 | "useTabs": false, 64 | "tabWidth": 2, 65 | "bracketSpacing": true 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo3.vue: -------------------------------------------------------------------------------- 1 | 4 | 78 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo6.vue: -------------------------------------------------------------------------------- 1 | 8 | 85 | 86 | -------------------------------------------------------------------------------- /vuepressdocs/guide/mtable.md: -------------------------------------------------------------------------------- 1 | 2 | # MTable 3 | 4 | 以下字段为表格的扩展和默认配置，其他配置请参照[el-table](https://element.eleme.io/#/zh-CN/component/table) 5 | 字段|说明|类型|默认值 6 | -|-|-|- 7 | border|是否带有纵向边框|boolean|true 8 | tableData|表格数据|Array|- 9 | isTree|是否为树形表格|boolean|false 10 | layout|分页器组件布局|string|'total,sizes,prev, pager, next, jumper' 11 | showNum|是否显示序号列|boolean|true 12 | numTitle|序号列名称|string|'序号' 13 | selection|表格是否展示多选列|boolean|false 14 | expand|表格是否可以展开|boolean|false 15 | columns|表格描述列信息|Array|- 16 | page|分页信息|Object||{pageNum: 1,pageSize: 15,total: 0} 17 | pageSizes|可选择每页多少条数据|Array|[15, 30, 45, 60] 18 | mergeRow|可合并列字段|Array|- 19 | mergeColumn|可合并行字段|Array|- 20 | 21 | 22 | ## 基础用法 23 | 自定义列可以通过 render方法 jsx语法。或者slot-scope 来自定义列 24 | 树形结构数据的支持需要elemen-ui >=2.7 25 | 26 | 27 | 28 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo.vue 29 | 30 | 31 | ## 多级表头、排序、多选 32 | 33 | 34 | 35 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo1.vue 36 | 37 | 38 | ## 展开行 39 | 40 | 41 | 42 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo2.vue 43 | 44 | 45 | 46 | ## 合计行 47 | 自动合计只需在需要合并的列sSummary为true,unit 为单位,如果想要手动合并summaryMethod 48 | 49 | 50 | 51 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo3.vue 52 | 53 | 54 | ## 合并单元格 55 | 自动合并单元格传入需要合并的行和列的字段，列的合并是根据值相同合并，行的合并是根据当前属性后的几个字段为undefined 56 | 如果要手动合并传入span-method方法 57 | 58 | 59 | 60 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo4.vue 61 | 62 | 63 | ## 编辑表格 64 | 通过getColumn合并当前column对象来渲染组件 65 | 66 | 67 | 68 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo5.vue 69 | 70 | 71 | 72 | ## 导出excel 73 | 74 | 75 | 76 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo6.vue 77 | 78 | 79 | ## 拖拽行 80 | 需要指定row-key, drop为true,drop-change事件会返回顺序变化后的数据 81 | 82 | 83 | 84 | <<< @/vuepressdocs/.vuepress/components/example/mtable/demo7.vue 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /docs/assets/js/14.387e9e69.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[14],{337:function(t,s,e){"use strict";e.r(s);var a=e(1),n=Object(a.a)({},(function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"content"},[t._m(0),t._v(" "),e("p",[t._v("mcommon 是基于elemen-ui封装的vue组件，"),e("router-link",{attrs:{to:"./mselect.html"}},[t._v("MSelect")]),t._v("、"),e("router-link",{attrs:{to:"./mform.html"}},[t._v("MForm")]),t._v("、"),e("router-link",{attrs:{to:"./mtable.html"}},[t._v("Mtable")]),t._v("，灵活的配置，强大的功能，能够大大提高前端同学的开发效率")],1),t._v(" "),t._m(1),t._v(" "),t._m(2),t._m(3)])}),[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"介绍"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#介绍"}},[this._v("#")]),this._v(" 介绍")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"安装"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#安装"}},[this._v("#")]),this._v(" 安装")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-bash extra-class"},[s("pre",{pre:!0,attrs:{class:"language-bash"}},[s("code",[this._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("npm")]),this._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("install")]),this._v(" @hanyk/mcommon\n")])])])},function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" elementUI "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'element-ui'")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" mcommon "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@hanyk/mcommon'")]),t._v("\nVue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("elementUI"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\nVue"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("mcommon"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])}],!1,null,null,null);s.default=n.exports}}]); -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo2.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 97 | 98 | 104 | -------------------------------------------------------------------------------- /docs/assets/js/3.e5075e1d.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{318:function(e,l,t){},321:function(e,l,t){"use strict";t(318)},326:function(e,l,t){"use strict";t.r(l);var a={data:function(){return{value:null,value1:[],dataList:[{value:"选项1",label:"黄金糕",disabled:!0},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],params:{id:1}}},methods:{customRender:function(e,l){return e("div",[e("span",{style:"float: left"},[l.label]),e("span",{style:"float: right; color: #8492a6; font-size: 13px"},[l.value])])},getList:function(e){var l=this;return console.log("getList 参数",e),new Promise((function(e){setTimeout((function(){e(l.dataList)}),2e3)}))},remoteMethod:function(e){var l=this;return console.log("remoteMethod 参数",e),new Promise((function(t){setTimeout((function(){e.keyWord?t(l.dataList):t([])}),2e3)}))},setSelectList:function(e){console.log("setSelectList",e)},currentObj:function(e){console.log("currentObj",e)}}},s=(t(321),t(1)),i=Object(s.a)(a,(function(){var e=this,l=e.$createElement,t=e._self._c||l;return t("ul",{staticClass:"demo-select"},[t("li",{staticClass:"li"},[t("label",[e._v("基本用法")]),e._v(" "),t("m-select",{attrs:{"data-list":e.dataList},model:{value:e.value,callback:function(l){e.value=l},expression:"value"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("异步获取数据")]),e._v(" "),t("m-select",{attrs:{"get-list":e.getList},model:{value:e.value,callback:function(l){e.value=l},expression:"value"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("远程搜索")]),e._v(" "),t("m-select",{attrs:{"get-list":e.remoteMethod,remote:""},model:{value:e.value,callback:function(l){e.value=l},expression:"value"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("扩展事件")]),e._v(" "),t("m-select",{attrs:{"get-list":e.getList,params:e.params},on:{selectList:e.setSelectList,currentObj:e.currentObj},model:{value:e.value,callback:function(l){e.value=l},expression:"value"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("自定义模板")]),e._v(" "),t("m-select",{attrs:{"data-list":e.dataList,"custom-render":e.customRender},model:{value:e.value,callback:function(l){e.value=l},expression:"value"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("禁用")]),e._v(" "),t("m-select",{attrs:{"data-list":e.dataList,"custom-render":e.customRender,disabled:""},model:{value:e.value,callback:function(l){e.value=l},expression:"value"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("基础多选")]),e._v(" "),t("m-select",{attrs:{multiple:"","data-list":e.dataList},model:{value:e.value1,callback:function(l){e.value1=l},expression:"value1"}})],1),e._v(" "),t("li",{staticClass:"li"},[t("label",[e._v("基础多选自定义模板")]),e._v(" "),t("m-select",{attrs:{multiple:"","data-list":e.dataList,"custom-render":e.customRender,"collapse-tags":""},model:{value:e.value1,callback:function(l){e.value1=l},expression:"value1"}})],1)])}),[],!1,null,null,null);l.default=i.exports}}]); -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo5.vue: -------------------------------------------------------------------------------- 1 | 10 | 104 | 105 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo1.vue: -------------------------------------------------------------------------------- 1 | 20 | 108 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/demo.vue: -------------------------------------------------------------------------------- 1 | 13 | 129 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mselect/demo.vue: -------------------------------------------------------------------------------- 1 | 51 | 125 | 138 | -------------------------------------------------------------------------------- /src/utils/export-csv.js: -------------------------------------------------------------------------------- 1 | const has = browser => { 2 | const ua = navigator.userAgent 3 | if (browser === 'ie') { 4 | const isIE = ua.indexOf('compatible') > -1 && ua.indexOf('MSIE') > -1 5 | if (isIE) { 6 | const reIE = new RegExp('MSIE (\\d+\\.\\d+);') 7 | reIE.test(ua) 8 | return parseFloat(RegExp.$1) 9 | } else { 10 | return false 11 | } 12 | } else { 13 | return ua.indexOf(browser) > -1 14 | } 15 | } 16 | 17 | const newLine = '\r\n' 18 | const appendLine = (content, row, { separator, quoted }) => { 19 | const line = row.map(data => { 20 | if (!quoted) return data 21 | // quote data 22 | data = typeof data === 'string' ? data.replace(/"/g, '"') : data 23 | return `"${data}"` 24 | }) 25 | content.push(line.join(separator)) 26 | } 27 | 28 | const defaults = { 29 | separator: ',', 30 | quoted: false 31 | } 32 | const csv = { 33 | _isIE11() { 34 | let iev = 0 35 | const ieold = /MSIE (\d+\.\d+);/.test(navigator.userAgent) 36 | const trident = !!navigator.userAgent.match(/Trident\/7.0/) 37 | const rv = navigator.userAgent.indexOf('rv:11.0') 38 | 39 | if (ieold) { 40 | iev = Number(RegExp.$1) 41 | } 42 | if (navigator.appVersion.indexOf('MSIE 10') !== -1) { 43 | iev = 10 44 | } 45 | if (trident && rv !== -1) { 46 | iev = 11 47 | } 48 | 49 | return iev === 11 50 | }, 51 | 52 | _isEdge() { 53 | return /Edge/.test(navigator.userAgent) 54 | }, 55 | 56 | _getDownloadUrl(text) { 57 | const BOM = '\uFEFF' 58 | // Add BOM to text for open in excel correctly 59 | if (window.Blob && window.URL && window.URL.createObjectURL) { 60 | const csvData = new window.Blob([BOM + text], { type: 'text/csv' }) 61 | return URL.createObjectURL(csvData) 62 | } else { 63 | return 'data:attachment/csv;charset=utf-8,' + BOM + encodeURIComponent(text) 64 | } 65 | }, 66 | 67 | download(filename, text) { 68 | if (has('ie') && has('ie') < 10) { 69 | // has module unable identify ie11 and Edge 70 | const oWin = window.top.open('about:blank', '_blank') 71 | oWin.document.charset = 'utf-8' 72 | oWin.document.write(text) 73 | oWin.document.close() 74 | oWin.document.execCommand('SaveAs', filename) 75 | oWin.close() 76 | } else if (has('ie') === 10 || this._isIE11() || this._isEdge()) { 77 | const BOM = '\uFEFF' 78 | const csvData = new Blob([BOM + text], { type: 'text/csv' }) 79 | navigator.msSaveBlob(csvData, filename) 80 | } else { 81 | const link = document.createElement('a') 82 | link.download = filename 83 | link.href = this._getDownloadUrl(text) 84 | document.body.appendChild(link) 85 | link.click() 86 | document.body.removeChild(link) 87 | } 88 | }, 89 | getStrFunction(str, obj) { 90 | str = str.replace(/(\.\d)/g, '[$1]').replace(/\.\[/g, '[') 91 | const Fn = Function 92 | try { 93 | return new Fn(`return this.${str}`).call(obj) 94 | } catch (error) { 95 | return undefined 96 | } 97 | }, 98 | format(columns, datas, options) { 99 | options = Object.assign({}, defaults, options) 100 | const content = [] 101 | const column = columns.map(v => v.label) 102 | appendLine(content, column, options) 103 | datas.forEach(row => { 104 | if (!Array.isArray(row)) { 105 | row = columns.map(obj => { 106 | let text 107 | if (typeof obj.format === 'function') { 108 | text = obj.format(row) 109 | } else { 110 | text = this.getStrFunction(obj.prop, row) 111 | } 112 | text = typeof text !== 'undefined' ? text : '' 113 | return `\t${text}`.replace(/,/g, '，') 114 | }) 115 | } 116 | appendLine(content, row, options) 117 | }) 118 | return content.join(newLine) 119 | } 120 | } 121 | 122 | export default csv 123 | -------------------------------------------------------------------------------- /docs/assets/js/6.5b239157.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[6],{325:function(e,l,a){"use strict";a.r(l);a(14),a(43);var t=a(23),s={data:function(){return{options:{size:"small",labelWidth:100,checkboxGroup:["a"]},formData:{state:"默认渲染span,性别选中男不显示该字段",list:[{}]},optionsColumns:[{label:"对齐方式",el:"radio-group",prop:"labelPosition",type:"button",dataList:[{label:"左对齐",value:"left"},{label:"右对齐",value:"right"},{label:"顶部对齐",value:"top"}]},{label:"尺寸",prop:"size",el:"radio-group",type:"button",dataList:[{label:"medium",value:"medium"},{label:"small",value:"small"},{label:"mini",value:"mini"}]},{label:"禁用全部字段",prop:"disabled",el:"switch"},{label:"禁用部分字段",prop:"disabledArr",el:"select",collapseTags:!0,multiple:!0,getList:this.getSelectList},{label:"labelWidth",prop:"labelWidth",el:"input-number",min:0},{label:"复选框",el:"checkbox-group",prop:"checkboxGroup",disabled:!1,span:30,dataList:[{label:"复选框 A",value:"a",disabled:!0},{label:"复选框 B",value:"b"},{label:"复选框 c",value:"c",disabled:!0},{label:"复选框 D",value:"d"}]}]}},computed:{columns:function(){var e=this,l=this.$createElement;return[{el:"input",prop:"name",label:"姓名",placeholder:"请输入姓名",disabled:this.isDisabled("name"),span:22,rules:{required:!0,message:"请输入姓名",trigger:"blur"}},{el:"radio-group",disabled:this.isDisabled("sex"),label:"性别",prop:"sex",dataList:[{label:"男",value:1},{label:"女",value:0}],rules:{required:!0,message:"请选择性别",trigger:"change"}}].concat(Object(t.a)(1!==this.formData.sex?[{label:"默认渲染",prop:"state",span:22}]:[]),[{label:"籍贯",disabled:this.isDisabled("addr"),el:"cascader",prop:"addr",options:[{label:"浙江省",value:1,children:[{label:"杭州市",value:2,children:[{label:"余杭区",value:3}]}]}]},{el:"select",disabled:this.isDisabled("xl"),label:"学历",prop:"xl",dataList:[{label:"大学",value:1},{label:"高中",value:2},{label:"初中",value:3}]},{el:"date-picker",label:"出生年月",disabled:this.isDisabled("date"),prop:"date",type:"month",format:"yyyy年MM月"},{label:"备注",disabled:this.isDisabled("remark"),prop:"remark",span:22,el:"input",type:"textarea"},{label:"render渲染",prop:"render",render:function(e){return e("el-progress",{attrs:{type:"circle",percentage:30}})}},{label:"slot渲染",prop:"slot"}],Object(t.a)(this.getOtherColumns()),[{prop:"btn",span:22,render:function(){return l("div",{style:"text-align:center"},[l("el-button",{attrs:{disabled:e.isDisabled("btn")},on:{click:function(){e.formData.list.push({})}}},["添加联动"]),l("el-button",{on:{click:function(){e.$refs.mform.validate().then((function(e){console.log(e)})).catch((function(e){console.log(e)}))}}},["表单验证"]),l("el-button",{on:{click:function(){e.formData={state:"默认渲染span,性别选中男不显示该字段",list:[{}]}}}},["重置表单"])])}}])}},methods:{isDisabled:function(e){return(this.options.disabledArr||[]).indexOf(e)>-1},getSelectList:function(){return Promise.resolve(this.columns.map((function(e){return{label:e.label,value:e.prop}})))},getList:function(e){var l=e.parent,a=[];return"zhejiang"===l?a=[{label:"杭州",value:"hangzhou"},{label:"宁波",value:"ningbo"}]:"shandong"===l&&(a=[{label:"济南",value:"jinan"},{label:"泰安",value:"taian"}]),new Promise((function(e){setTimeout((function(){e(a)}),1e3)}))},getOtherColumns:function(){var e=this,l=this.$createElement;return this.formData.list.map((function(a,t){return[{label:"联动选择".concat(t),prop:"list[".concat(t,"].label"),el:"select",rules:{required:!0,message:"请选择省份",trigger:"change"},dataList:[{label:"浙江",value:"zhejiang"},{label:"山东",value:"shandong"}]},{el:"select",getList:e.getList,prop:"list[".concat(t,"].value"),span:6,rules:{required:!0,message:"请选择城市",trigger:"change"},params:{parent:"list[".concat(t,"].label")}},{prop:"del".concat(t),span:6,render:l("el-button",{attrs:{type:"danger"},on:{click:function(){e.formData.list.splice(t,1)}}},["删除"])}]})).flat()}}},i=a(1),n=Object(i.a)(s,(function(){var e=this,l=e.$createElement,a=e._self._c||l;return a("div",[a("h3",[e._v("表单控制")]),e._v(" "),a("m-form",{attrs:{formData:e.options,columns:e.optionsColumns}}),e._v(" "),a("br"),e._v(" "),a("h3",[e._v("表单展示")]),e._v("\n "+e._s(e.formData)+"\n "),a("m-form",{ref:"mform",attrs:{formData:e.formData,size:e.options.size,"no-warp":"",labelPosition:e.options.labelPosition,columns:e.columns,disabled:e.options.disabled,labelWidth:e.options.labelWidth+"px"}},[a("el-progress",{attrs:{slot:"slot",type:"circle",percentage:80,color:"#8e71c7"},slot:"slot"})],1)],1)}),[],!1,null,null,null);l.default=n.exports}}]); -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | mcommon 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
mcommon

mcommon

19 | 基于element-ui form、table二次封装，支持原table和form的所有功能。 20 |

快速上手 →

简洁至上

以 element-ui 的表单和表格为基础进行二次封装，增强功能加少代码量

配置简单

使用原有element 表单和表格的参数及事件。

API全部支持

支持所有的事件及参数

21 | MIT Licensed | Copyright © 2018-present Evan You 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/MSelect.js: -------------------------------------------------------------------------------- 1 | import { isDiff } from '../utils/index' 2 | export default { 3 | name: 'MSelect', 4 | props: { 5 | params: { 6 | type: Object, 7 | default() { 8 | return {} 9 | } 10 | }, 11 | valueKey: { 12 | type: Object, 13 | default() { 14 | return { 15 | label: 'label', 16 | value: 'value' 17 | } 18 | } 19 | }, 20 | nullRequest: Boolean, 21 | value: { 22 | type: [String, Boolean, Number, Array], 23 | default: '' 24 | }, 25 | dataList: Array, 26 | multiple: Boolean, 27 | showMsg: Boolean, 28 | getList: Function, 29 | remote: Boolean, 30 | customRender: Function, 31 | notClear: Boolean 32 | }, 33 | data() { 34 | return { 35 | list: [], 36 | currentValue: '', 37 | loading: false, 38 | selectObj: {} 39 | } 40 | }, 41 | watch: { 42 | params(nv, ov) { 43 | isDiff(nv, ov) && this.pageInit() 44 | }, 45 | value(v) { 46 | this.setCurrentValue() 47 | }, 48 | currentValue(v) { 49 | this.$emit('input', v) 50 | this.getCurrentObj() 51 | }, 52 | dataList(val) { 53 | this.list = val 54 | }, 55 | list(val, oldval) { 56 | if (oldval && oldval.length && !this.notClear) { 57 | this.changeCurrentValue() 58 | } 59 | const checkedItem = val.filter(item => item.checked) 60 | if (!checkedItem.length || this.currentValue || (Array.isArray(this.currentValue) && this.currentValue.length)) return 61 | if (this.multiple) { 62 | this.currentValue = checkedItem.map(item => item[this.valueKey.value]) 63 | } else { 64 | this.currentValue = checkedItem[0][this.valueKey.value] 65 | } 66 | } 67 | }, 68 | created() { 69 | this.setCurrentValue() 70 | if (this.dataList) { 71 | this.list = this.dataList 72 | if (this.currentValue) this.getCurrentObj() 73 | } else { 74 | this.pageInit() 75 | } 76 | }, 77 | methods: { 78 | setCurrentValue() { 79 | if (this.multiple) { 80 | if (Array.isArray(this.value)) { 81 | this.currentValue = this.value 82 | } else if (typeof this.value === 'string' && this.value) { 83 | this.currentValue = this.value.split(',') 84 | } else this.currentValue = [] 85 | } else this.currentValue = this.value 86 | }, 87 | changeCurrentValue() { 88 | if (this.list.length) { 89 | if (!this.multiple) { 90 | this.currentValue !== null && 91 | this.currentValue !== undefined && 92 | this.currentValue !== '' && 93 | !this.list.some(obj => obj[this.valueKey.value] === this.currentValue) && 94 | (this.currentValue = null) 95 | } else { 96 | this.currentValue && this.currentValue.length && (this.currentValue = this.currentValue.filter(id => this.list.some(obj => obj[this.valueKey.value] === id))) 97 | } 98 | } else { 99 | if (this.multiple) { 100 | this.currentValue = [] 101 | } else { 102 | this.currentValue = '' 103 | } 104 | } 105 | }, 106 | pageInit() { 107 | const arr = Object.keys(this.params) 108 | if (arr.length) { 109 | const flag = arr.some(o => this.params[o] === null) 110 | if (flag && !this.nullRequest) return 111 | } 112 | this.getData() 113 | }, 114 | getCurrentObj() { 115 | if (!this.list.length) return 116 | let currentObj = null 117 | const key = this.valueKey.value 118 | if (!this.multiple) { 119 | if (!this.currentValue) { 120 | currentObj = {} 121 | } else { 122 | currentObj = this.list.find(obj => obj[key] === this.currentValue) || {} 123 | } 124 | } else { 125 | currentObj = [] 126 | this.currentValue.forEach(id => { 127 | const obj = this.list.find(obj => obj[key] === id) 128 | if (obj) currentObj.push(obj) 129 | }) 130 | } 131 | this.selectObj = currentObj 132 | this.$emit('currentObj', currentObj) 133 | }, 134 | remoteMethod(keyWord) { 135 | this.getData({ keyWord }) 136 | }, 137 | getData(otherData = {}) { 138 | if (!this.getList) return 139 | this.loading = true 140 | this.getList({ ...this.params, ...otherData }, this.showMsg) 141 | .then(res => { 142 | const data = Array.isArray(res) ? res : res.data || [] 143 | this.list = data 144 | this.$emit('selectList', this.list) 145 | this.loading = false 146 | }) 147 | .catch(err => { 148 | this.list = [] 149 | this.loading = false 150 | return Promise.reject(err) 151 | }) 152 | } 153 | }, 154 | render(h) { 155 | const { list, valueKey, multiple, loading, currentValue, remoteMethod, $attrs, $listeners, customRender, remote } = this 156 | const listeners = { 157 | ...$listeners, 158 | input: val => { 159 | this.currentValue = val 160 | $listeners.input && $listeners.input(val) 161 | } 162 | } 163 | if (this.remote && !listeners.clear) { 164 | listeners.clear = remoteMethod 165 | } 166 | const options = { 167 | ...$attrs 168 | } 169 | delete options.valueKey 170 | return h( 171 | 'el-select', 172 | { 173 | props: { 174 | loading: loading, 175 | value: currentValue, 176 | loadingText: '加载中', 177 | filterable: true, 178 | clearable: true, 179 | remote: remote || false, 180 | remoteMethod: remote ? remoteMethod : undefined, 181 | multiple: multiple, 182 | ...options 183 | }, 184 | style: { 185 | width: '100%' 186 | }, 187 | on: listeners 188 | }, 189 | [ 190 | list.map(item => { 191 | return h( 192 | 'el-option', 193 | { 194 | props: { 195 | label: item[valueKey.label], 196 | value: item[valueKey.value], 197 | disabled: item.disabled 198 | }, 199 | key: item[valueKey.value] 200 | }, 201 | [customRender ? customRender(h, item) : null] 202 | ) 203 | }) 204 | ] 205 | ) 206 | } 207 | } 208 | -------------------------------------------------------------------------------- /docs/guide/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 介绍 | mcommon 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
mcommon

# 介绍

mcommon 是基于elemen-ui封装的vue组件，MSelect、MForm、Mtable，灵活的配置，强大的功能，能够大大提高前端同学的开发效率

# 安装

  npm install @hanyk/mcommon
19 | 
import Vue from 'vue'
20 | import elementUI from 'element-ui'
21 | 
22 | import mcommon from '@hanyk/mcommon'
23 | Vue.use(elementUI)
24 | Vue.use(mcommon)
25 |

26 | MSelect 27 | 28 | → 29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/assets/js/5.b2ef6a46.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{322:function(e){e.exports=JSON.parse('[{"id":"0","parentId":null,"value":"zhinan","label":"指南","children":[{"id":"0-0","parentId":"0","value":"shejiyuanze","label":"设计原则","children":[{"id":"0-0-0","parentId":"0-0","value":"yizhi","label":"一致","state":0,"children":null},{"id":"0-0-1","parentId":"0-0","value":"fankui","label":"反馈","state":1,"children":null},{"id":"0-0-2","parentId":"0-0","value":"xiaolv","label":"效率","state":0,"children":null},{"id":"0-0-3","parentId":"0-0","value":"kekong","label":"可控","state":1,"children":null}],"state":0},{"id":"0-1","parentId":"0","value":"daohang","label":"导航","children":[{"id":"0-1-0","parentId":"0-1","value":"cexiangdaohang","label":"侧向导航","state":0,"children":null},{"id":"0-1-1","parentId":"0-1","value":"dingbudaohang","label":"顶部导航","state":1,"children":null}],"state":1}],"state":0},{"id":"1","parentId":null,"value":"zujian","label":"组件","children":[{"id":"1-0","parentId":"1","value":"basic","label":"Basic","children":[{"id":"1-0-0","parentId":"1-0","value":"layout","label":"Layout 布局","state":0,"children":null},{"id":"1-0-1","parentId":"1-0","value":"color","label":"Color 色彩","state":1,"children":null},{"id":"1-0-2","parentId":"1-0","value":"typography","label":"Typography 字体","state":0,"children":null},{"id":"1-0-3","parentId":"1-0","value":"icon","label":"Icon 图标","state":1,"children":null},{"id":"1-0-4","parentId":"1-0","value":"button","label":"Button 按钮","state":0,"children":null}],"state":0},{"id":"1-1","parentId":"1","value":"form","label":"Form","children":[{"id":"1-1-0","parentId":"1-1","value":"radio","label":"Radio 单选框","state":0,"children":null},{"id":"1-1-1","parentId":"1-1","value":"checkbox","label":"Checkbox 多选框","state":1,"children":null},{"id":"1-1-2","parentId":"1-1","value":"input","label":"Input 输入框","state":0,"children":null},{"id":"1-1-3","parentId":"1-1","value":"input-number","label":"InputNumber 计数器","state":1,"children":null},{"id":"1-1-4","parentId":"1-1","value":"select","label":"Select 选择器","state":0,"children":null},{"id":"1-1-5","parentId":"1-1","value":"cascader","label":"Cascader 级联选择器","state":1,"children":null},{"id":"1-1-6","parentId":"1-1","value":"switch","label":"Switch 开关","state":0,"children":null},{"id":"1-1-7","parentId":"1-1","value":"slider","label":"Slider 滑块","state":1,"children":null},{"id":"1-1-8","parentId":"1-1","value":"time-picker","label":"TimePicker 时间选择器","state":0,"children":null},{"id":"1-1-9","parentId":"1-1","value":"date-picker","label":"DatePicker 日期选择器","state":1,"children":null},{"id":"1-1-10","parentId":"1-1","value":"datetime-picker","label":"DateTimePicker 日期时间选择器","state":0,"children":null},{"id":"1-1-11","parentId":"1-1","value":"upload","label":"Upload 上传","state":1,"children":null},{"id":"1-1-12","parentId":"1-1","value":"rate","label":"Rate 评分","state":0,"children":null},{"id":"1-1-13","parentId":"1-1","value":"form","label":"Form 表单","state":1,"children":null}],"state":1},{"id":"1-2","parentId":"1","value":"data","label":"Data","children":[{"id":"1-2-0","parentId":"1-2","value":"table","label":"Table 表格","state":0,"children":null},{"id":"1-2-1","parentId":"1-2","value":"tag","label":"Tag 标签","state":1,"children":null},{"id":"1-2-2","parentId":"1-2","value":"progress","label":"Progress 进度条","state":0,"children":null},{"id":"1-2-3","parentId":"1-2","value":"tree","label":"Tree 树形控件","state":1,"children":null},{"id":"1-2-4","parentId":"1-2","value":"pagination","label":"Pagination 分页","state":0,"children":null},{"id":"1-2-5","parentId":"1-2","value":"badge","label":"Badge 标记","state":1,"children":null}],"state":0},{"id":"1-3","parentId":"1","value":"notice","label":"Notice","children":[{"id":"1-3-0","parentId":"1-3","value":"alert","label":"Alert 警告","state":0,"children":null},{"id":"1-3-1","parentId":"1-3","value":"loading","label":"Loading 加载","state":1,"children":null},{"id":"1-3-2","parentId":"1-3","value":"message","label":"Message 消息提示","state":0,"children":null},{"id":"1-3-3","parentId":"1-3","value":"message-box","label":"MessageBox 弹框","state":1,"children":null},{"id":"1-3-4","parentId":"1-3","value":"notification","label":"Notification 通知","state":0,"children":null}],"state":1},{"id":"1-4","parentId":"1","value":"navigation","label":"Navigation","children":[{"id":"1-4-0","parentId":"1-4","value":"menu","label":"NavMenu 导航菜单","state":0,"children":null},{"id":"1-4-1","parentId":"1-4","value":"tabs","label":"Tabs 标签页","state":1,"children":null},{"id":"1-4-2","parentId":"1-4","value":"breadcrumb","label":"Breadcrumb 面包屑","state":0,"children":null},{"id":"1-4-3","parentId":"1-4","value":"dropdown","label":"Dropdown 下拉菜单","state":1,"children":null},{"id":"1-4-4","parentId":"1-4","value":"steps","label":"Steps 步骤条","state":0,"children":null}],"state":0},{"id":"1-5","parentId":"1","value":"others","label":"Others","children":[{"id":"1-5-0","parentId":"1-5","value":"dialog","label":"Dialog 对话框","state":0,"children":null},{"id":"1-5-1","parentId":"1-5","value":"tooltip","label":"Tooltip 文字提示","state":1,"children":null},{"id":"1-5-2","parentId":"1-5","value":"popover","label":"Popover 弹出框","state":0,"children":null},{"id":"1-5-3","parentId":"1-5","value":"card","label":"Card 卡片","state":1,"children":null},{"id":"1-5-4","parentId":"1-5","value":"carousel","label":"Carousel 走马灯","state":0,"children":null},{"id":"1-5-5","parentId":"1-5","value":"collapse","label":"Collapse 折叠面板","state":1,"children":null}],"state":1}],"state":1},{"id":"2","parentId":null,"value":"ziyuan","label":"资源","children":[{"id":"2-0","parentId":"2","value":"axure","label":"Axure Components","state":0,"children":null},{"id":"2-1","parentId":"2","value":"sketch","label":"Sketch Templates","state":1,"children":null},{"id":"2-2","parentId":"2","value":"jiaohu","label":"组件交互文档","state":0,"children":null}],"state":0}]')},327:function(e,l,a){"use strict";a.r(l);a(118);var t=a(322),n={data:function(){this.$createElement;return{options:{border:!1,stripe:!1,isTree:!1,showPage:!1,size:"small",showNum:!1},pageInfo:{pageSize:15,pageNum:1,total:0},optionsColumns:[{label:"斑马线",el:"switch",prop:"stripe"},{label:"树形结构",el:"switch",prop:"isTree"},{label:"纵向边框",el:"switch",prop:"border"},{label:"分页",el:"switch",prop:"showPage"},{label:"尺寸",prop:"size",el:"radio-group",type:"button",dataList:[{label:"medium",value:"medium"},{label:"small",value:"small"},{label:"mini",value:"mini"}]},{label:"序号列",prop:"showNum",el:"switch"}],columns:[{prop:"value",label:"名称",align:"left",width:150},{label:"描述",prop:"label"},{label:"id",prop:"id"},{label:"slotScope渲染",prop:"slot",width:130},{label:"状态",prop:"state",format:function(e){return e.state?"启用":"禁用"}},{label:"render渲染",prop:"render",render:function(e,l){return e("el-button",{attrs:{type:"primary"}},["编辑"])}}]}},computed:{tableData:function(){var e=JSON.parse(JSON.stringify(t));return this.options.isTree?e:e.reduce((function e(l,a){return a.children&&(a.children.reduce(e,l),delete a.children),l.push(a),l}),[])}},methods:{pageChange:function(e){this.pageInfo=e}}},d=a(1),r=Object(d.a)(n,(function(){var e=this,l=e.$createElement,a=e._self._c||l;return a("div",[a("m-form",{attrs:{model:e.options,columns:e.optionsColumns}}),e._v("\n "+e._s(e.options)+"\n "),a("br"),e._v(" "),a("m-table",e._b({attrs:{"table-data":e.tableData,page:e.pageInfo,"row-key":"id",columns:e.columns},on:{pageChange:e.pageChange},scopedSlots:e._u([{key:"slot",fn:function(l){l.row;var a=l.$index;return[e._v("\n $index = "+e._s(a)+"\n ")]}}])},"m-table",e.options,!1))],1)}),[],!1,null,null,null);l.default=r.exports}}]); -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/demo-block/index.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 179 | 180 | 272 | -------------------------------------------------------------------------------- /src/components/MItem.js: -------------------------------------------------------------------------------- 1 | import { currency } from '@/utils/index' 2 | const attributes = ['maxlength', 'minlenght', 'rows', 'autocomplete', 'name', 'readonly', 'max', 'min', 'step', 'autofocus', 'form'] 3 | const createChildren = (h, el, column, valueKey) => { 4 | const list = column.dataList || column.list || [] 5 | return list.map(item => { 6 | let children 7 | if (column.slots && column.slots.default) { 8 | children = [column.slots.default.call(null, h, item)] 9 | } else { 10 | children = item[valueKey.label] 11 | } 12 | 13 | return h( 14 | el, 15 | { 16 | props: { 17 | ...column, 18 | label: column.props ? item[column.props.value] : item[valueKey.value], 19 | disabled : item.disabled || false 20 | }, 21 | key: item[valueKey.label] 22 | }, 23 | children 24 | ) 25 | }) 26 | } 27 | export default { 28 | name: 'MItem', 29 | props: { 30 | row: { 31 | type: Object, 32 | required: true 33 | }, 34 | column: { 35 | type: Object, 36 | required: true 37 | }, 38 | $index: Number 39 | }, 40 | data() { 41 | return { 42 | isForce: false 43 | } 44 | }, 45 | watch: { 46 | row(ov, nv) { 47 | if (this.$parent.clearValidate && ov !== nv) { 48 | this.$nextTick(this.$parent.clearValidate) 49 | } 50 | } 51 | }, 52 | computed: { 53 | computedColumn() { 54 | return { 55 | ...this.column, 56 | ...((this.column.getColumn && this.column.getColumn(this.row)) || {}) 57 | } 58 | }, 59 | componentType() { 60 | const { el } = this.computedColumn 61 | if (!el) return null 62 | if (el === 'mSelect' || el === 'MSelect' || el === 'select' || el === 'el-select') { 63 | return 'm-select' 64 | } else { 65 | return el.startsWith('el-') ? el : 'el-' + el 66 | } 67 | }, 68 | valueKey() { 69 | if (this.computedColumn.valueKey) return this.computedColumn.valueKey 70 | return { 71 | label: 'label', 72 | value: 'value' 73 | } 74 | }, 75 | modelComputed: { 76 | get() { 77 | let val = null 78 | try { 79 | val = this.getStrFunction(`this.row.${this.column.prop}`) 80 | } catch (error) { 81 | this.setRowKey(null) 82 | } 83 | if (this.column.type === 'currency') { 84 | return this.isForce ? val : currency(val, this.column.currency, this.column.decimals) 85 | } 86 | return val 87 | }, 88 | set(value) { 89 | const { type, trim, nullString = true } = this.computedColumn 90 | if (type === 'currency' || type === 'number') { 91 | const reg = /^-?[0-9]*\.?\d*$/g 92 | if (!reg.test(value)) { 93 | value = value.substr(0, value.length - 1) 94 | } 95 | } 96 | if (this.componentType === 'el-input') { 97 | if (trim) value = value.trim() 98 | if (nullString && value === '') value = null 99 | } 100 | 101 | try { 102 | if (this.getStrFunction(`this.row.${this.computedColumn.prop}`) === undefined) { 103 | this.setRowKey(value) 104 | } else this.getStrFunction(`this.row.${this.computedColumn.prop} = value`) 105 | } catch (error) { 106 | this.setRowKey(value) 107 | } 108 | } 109 | } 110 | }, 111 | methods: { 112 | getStrFunction(str) { 113 | str = str.replace(/(\.\d)/g, '[$1]').replace(/\.\[/g, '[') 114 | const Fn = Function 115 | return new Fn(`return ${str}`).call(this) 116 | }, 117 | setRowKey(value) { 118 | if (this.computedColumn.prop && this.row) { 119 | const path = this.computedColumn.prop.replace(/\[(\w+)\]/g, '.$1').replace(/^\./, '') 120 | const arr = path.split('.') 121 | const firstKey = arr.shift() 122 | const lastIndex = arr.length - 1 123 | if (lastIndex >= 0) { 124 | const emptyObj = this.row[firstKey] || {} 125 | const val = arr.reduce((x, y, index) => { 126 | if (index === lastIndex) { 127 | x[y] = value 128 | return emptyObj 129 | } 130 | if (!x[y]) x[y] = {} 131 | return x[y] 132 | }, emptyObj) 133 | this.$set(this.row, firstKey, JSON.parse(JSON.stringify(val))) 134 | } else { 135 | this.$set(this.row, firstKey, value) 136 | } 137 | } 138 | }, 139 | getParams() { 140 | const newObj = {} 141 | if (this.computedColumn.params && typeof this.computedColumn.params === 'object') { 142 | for (const key in this.computedColumn.params) { 143 | let value 144 | try { 145 | value = this.getStrFunction(`this.row.${this.computedColumn.params[key]}`) 146 | } catch (err) {} 147 | newObj[key] = value !== undefined ? value : this.computedColumn.params[key] 148 | } 149 | } 150 | return newObj 151 | } 152 | }, 153 | render(h) { 154 | const { row, column, $index, computedColumn, modelComputed, componentType, valueKey, getParams } = this 155 | if (componentType) { 156 | const placeholder = computedColumn.placeholder !== undefined ? computedColumn.placeholder : computedColumn.label 157 | const listeners = { 158 | ...(computedColumn.listeners || {}), 159 | input: val => { 160 | this.modelComputed = val 161 | computedColumn.listeners && computedColumn.listeners.input && computedColumn.listeners.input(val) 162 | } 163 | } 164 | if (computedColumn.listeners && computedColumn.listeners.currentObj) { 165 | listeners.currentObj = data => computedColumn.listeners.currentObj(data, row, $index) 166 | } 167 | const arr = ['m-select', 'el-checkbox-group', 'el-radio-group'] 168 | if (arr.includes(componentType)) { 169 | let str = '' 170 | if (computedColumn.type === 'button') { 171 | str = '-button' 172 | } 173 | const children = 174 | componentType !== 'm-select' ? createChildren(h, componentType === 'el-checkbox-group' ? `el-checkbox${str}` : `el-radio${str}`, computedColumn, valueKey) : null 175 | return h( 176 | componentType, 177 | { 178 | props: { 179 | ...computedColumn, 180 | placeholder, 181 | params: componentType === 'm-select' ? getParams(computedColumn) : null, 182 | value: modelComputed, 183 | customRender: computedColumn.slots && computedColumn.slots.default ? computedColumn.slots.default : null 184 | }, 185 | attrs: componentType === 'm-select' ? computedColumn : null, 186 | on: listeners 187 | }, 188 | children 189 | ) 190 | } else { 191 | if (componentType === 'el-input' && computedColumn.type === 'currency') { 192 | listeners.blur = (...args) => { 193 | this.isForce = false 194 | computedColumn.listeners && computedColumn.listeners.blur && computedColumn.listeners.blur(...args) 195 | } 196 | listeners.focus = (...args) => { 197 | this.isForce = true 198 | computedColumn.listeners && computedColumn.listeners.focus && computedColumn.listeners.focus(...args) 199 | } 200 | } 201 | const slots = computedColumn.slots || {} 202 | const children = [] 203 | const scopedSlots = {} 204 | Object.keys(slots).forEach(key => { 205 | if (typeof slots[key] === 'function') { 206 | scopedSlots[key] = slots[key].bind(null, h) 207 | } else { 208 | children.push( 209 | h( 210 | 'template', 211 | { 212 | slot: key 213 | }, 214 | [slots[key]] 215 | ) 216 | ) 217 | } 218 | }) 219 | const attrs = attributes.reduce( 220 | (obj, key) => { 221 | if (this.computedColumn[key]) obj[key] = this.computedColumn[key] 222 | return obj 223 | }, 224 | { placeholder } 225 | ) 226 | return h( 227 | componentType, 228 | { 229 | props: { 230 | filterable: true, 231 | ...computedColumn, 232 | value: modelComputed, 233 | columnOptions: computedColumn, 234 | label: componentType === 'el-checkbox' || componentType === 'el-radio' ? null : computedColumn.label 235 | }, 236 | attrs: attrs, 237 | scopedSlots, 238 | on: listeners 239 | }, 240 | children 241 | ) 242 | } 243 | } else { 244 | const VNode = typeof computedColumn.render === 'function' ? computedColumn.render(h, { row, computedColumn, $index }) : computedColumn.render 245 | return ( 246 | VNode || 247 | h( 248 | 'span', 249 | { 250 | class: 'item-container', 251 | style: { 252 | 'word-break': 'break-all' 253 | } 254 | }, 255 | computedColumn.format ? computedColumn.format(row) : modelComputed 256 | ) 257 | ) 258 | } 259 | } 260 | } 261 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mform/demo.vue: -------------------------------------------------------------------------------- 1 | 22 | 367 | -------------------------------------------------------------------------------- /vuepressdocs/.vuepress/components/example/mtable/data.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": "0", 3 | "parentId": null, 4 | "value": "zhinan", 5 | "label": "指南", 6 | "children": [{ 7 | "id": "0-0", 8 | "parentId": "0", 9 | "value": "shejiyuanze", 10 | "label": "设计原则", 11 | "children": [{ 12 | "id": "0-0-0", 13 | "parentId": "0-0", 14 | "value": "yizhi", 15 | "label": "一致", 16 | "state": 0, 17 | "children": null 18 | }, { 19 | "id": "0-0-1", 20 | "parentId": "0-0", 21 | "value": "fankui", 22 | "label": "反馈", 23 | "state": 1, 24 | "children": null 25 | }, { 26 | "id": "0-0-2", 27 | "parentId": "0-0", 28 | "value": "xiaolv", 29 | "label": "效率", 30 | "state": 0, 31 | "children": null 32 | }, { 33 | "id": "0-0-3", 34 | "parentId": "0-0", 35 | "value": "kekong", 36 | "label": "可控", 37 | "state": 1, 38 | "children": null 39 | }], 40 | "state": 0 41 | }, { 42 | "id": "0-1", 43 | "parentId": "0", 44 | "value": "daohang", 45 | "label": "导航", 46 | "children": [{ 47 | "id": "0-1-0", 48 | "parentId": "0-1", 49 | "value": "cexiangdaohang", 50 | "label": "侧向导航", 51 | "state": 0, 52 | "children": null 53 | }, { 54 | "id": "0-1-1", 55 | "parentId": "0-1", 56 | "value": "dingbudaohang", 57 | "label": "顶部导航", 58 | "state": 1, 59 | "children": null 60 | }], 61 | "state": 1 62 | }], 63 | "state": 0 64 | }, { 65 | "id": "1", 66 | "parentId": null, 67 | "value": "zujian", 68 | "label": "组件", 69 | "children": [{ 70 | "id": "1-0", 71 | "parentId": "1", 72 | "value": "basic", 73 | "label": "Basic", 74 | "children": [{ 75 | "id": "1-0-0", 76 | "parentId": "1-0", 77 | "value": "layout", 78 | "label": "Layout 布局", 79 | "state": 0, 80 | "children": null 81 | }, { 82 | "id": "1-0-1", 83 | "parentId": "1-0", 84 | "value": "color", 85 | "label": "Color 色彩", 86 | "state": 1, 87 | "children": null 88 | }, { 89 | "id": "1-0-2", 90 | "parentId": "1-0", 91 | "value": "typography", 92 | "label": "Typography 字体", 93 | "state": 0, 94 | "children": null 95 | }, { 96 | "id": "1-0-3", 97 | "parentId": "1-0", 98 | "value": "icon", 99 | "label": "Icon 图标", 100 | "state": 1, 101 | "children": null 102 | }, { 103 | "id": "1-0-4", 104 | "parentId": "1-0", 105 | "value": "button", 106 | "label": "Button 按钮", 107 | "state": 0, 108 | "children": null 109 | }], 110 | "state": 0 111 | }, { 112 | "id": "1-1", 113 | "parentId": "1", 114 | "value": "form", 115 | "label": "Form", 116 | "children": [{ 117 | "id": "1-1-0", 118 | "parentId": "1-1", 119 | "value": "radio", 120 | "label": "Radio 单选框", 121 | "state": 0, 122 | "children": null 123 | }, { 124 | "id": "1-1-1", 125 | "parentId": "1-1", 126 | "value": "checkbox", 127 | "label": "Checkbox 多选框", 128 | "state": 1, 129 | "children": null 130 | }, { 131 | "id": "1-1-2", 132 | "parentId": "1-1", 133 | "value": "input", 134 | "label": "Input 输入框", 135 | "state": 0, 136 | "children": null 137 | }, { 138 | "id": "1-1-3", 139 | "parentId": "1-1", 140 | "value": "input-number", 141 | "label": "InputNumber 计数器", 142 | "state": 1, 143 | "children": null 144 | }, { 145 | "id": "1-1-4", 146 | "parentId": "1-1", 147 | "value": "select", 148 | "label": "Select 选择器", 149 | "state": 0, 150 | "children": null 151 | }, { 152 | "id": "1-1-5", 153 | "parentId": "1-1", 154 | "value": "cascader", 155 | "label": "Cascader 级联选择器", 156 | "state": 1, 157 | "children": null 158 | }, { 159 | "id": "1-1-6", 160 | "parentId": "1-1", 161 | "value": "switch", 162 | "label": "Switch 开关", 163 | "state": 0, 164 | "children": null 165 | }, { 166 | "id": "1-1-7", 167 | "parentId": "1-1", 168 | "value": "slider", 169 | "label": "Slider 滑块", 170 | "state": 1, 171 | "children": null 172 | }, { 173 | "id": "1-1-8", 174 | "parentId": "1-1", 175 | "value": "time-picker", 176 | "label": "TimePicker 时间选择器", 177 | "state": 0, 178 | "children": null 179 | }, { 180 | "id": "1-1-9", 181 | "parentId": "1-1", 182 | "value": "date-picker", 183 | "label": "DatePicker 日期选择器", 184 | "state": 1, 185 | "children": null 186 | }, { 187 | "id": "1-1-10", 188 | "parentId": "1-1", 189 | "value": "datetime-picker", 190 | "label": "DateTimePicker 日期时间选择器", 191 | "state": 0, 192 | "children": null 193 | }, { 194 | "id": "1-1-11", 195 | "parentId": "1-1", 196 | "value": "upload", 197 | "label": "Upload 上传", 198 | "state": 1, 199 | "children": null 200 | }, { 201 | "id": "1-1-12", 202 | "parentId": "1-1", 203 | "value": "rate", 204 | "label": "Rate 评分", 205 | "state": 0, 206 | "children": null 207 | }, { 208 | "id": "1-1-13", 209 | "parentId": "1-1", 210 | "value": "form", 211 | "label": "Form 表单", 212 | "state": 1, 213 | "children": null 214 | }], 215 | "state": 1 216 | }, { 217 | "id": "1-2", 218 | "parentId": "1", 219 | "value": "data", 220 | "label": "Data", 221 | "children": [{ 222 | "id": "1-2-0", 223 | "parentId": "1-2", 224 | "value": "table", 225 | "label": "Table 表格", 226 | "state": 0, 227 | "children": null 228 | }, { 229 | "id": "1-2-1", 230 | "parentId": "1-2", 231 | "value": "tag", 232 | "label": "Tag 标签", 233 | "state": 1, 234 | "children": null 235 | }, { 236 | "id": "1-2-2", 237 | "parentId": "1-2", 238 | "value": "progress", 239 | "label": "Progress 进度条", 240 | "state": 0, 241 | "children": null 242 | }, { 243 | "id": "1-2-3", 244 | "parentId": "1-2", 245 | "value": "tree", 246 | "label": "Tree 树形控件", 247 | "state": 1, 248 | "children": null 249 | }, { 250 | "id": "1-2-4", 251 | "parentId": "1-2", 252 | "value": "pagination", 253 | "label": "Pagination 分页", 254 | "state": 0, 255 | "children": null 256 | }, { 257 | "id": "1-2-5", 258 | "parentId": "1-2", 259 | "value": "badge", 260 | "label": "Badge 标记", 261 | "state": 1, 262 | "children": null 263 | }], 264 | "state": 0 265 | }, { 266 | "id": "1-3", 267 | "parentId": "1", 268 | "value": "notice", 269 | "label": "Notice", 270 | "children": [{ 271 | "id": "1-3-0", 272 | "parentId": "1-3", 273 | "value": "alert", 274 | "label": "Alert 警告", 275 | "state": 0, 276 | "children": null 277 | }, { 278 | "id": "1-3-1", 279 | "parentId": "1-3", 280 | "value": "loading", 281 | "label": "Loading 加载", 282 | "state": 1, 283 | "children": null 284 | }, { 285 | "id": "1-3-2", 286 | "parentId": "1-3", 287 | "value": "message", 288 | "label": "Message 消息提示", 289 | "state": 0, 290 | "children": null 291 | }, { 292 | "id": "1-3-3", 293 | "parentId": "1-3", 294 | "value": "message-box", 295 | "label": "MessageBox 弹框", 296 | "state": 1, 297 | "children": null 298 | }, { 299 | "id": "1-3-4", 300 | "parentId": "1-3", 301 | "value": "notification", 302 | "label": "Notification 通知", 303 | "state": 0, 304 | "children": null 305 | }], 306 | "state": 1 307 | }, { 308 | "id": "1-4", 309 | "parentId": "1", 310 | "value": "navigation", 311 | "label": "Navigation", 312 | "children": [{ 313 | "id": "1-4-0", 314 | "parentId": "1-4", 315 | "value": "menu", 316 | "label": "NavMenu 导航菜单", 317 | "state": 0, 318 | "children": null 319 | }, { 320 | "id": "1-4-1", 321 | "parentId": "1-4", 322 | "value": "tabs", 323 | "label": "Tabs 标签页", 324 | "state": 1, 325 | "children": null 326 | }, { 327 | "id": "1-4-2", 328 | "parentId": "1-4", 329 | "value": "breadcrumb", 330 | "label": "Breadcrumb 面包屑", 331 | "state": 0, 332 | "children": null 333 | }, { 334 | "id": "1-4-3", 335 | "parentId": "1-4", 336 | "value": "dropdown", 337 | "label": "Dropdown 下拉菜单", 338 | "state": 1, 339 | "children": null 340 | }, { 341 | "id": "1-4-4", 342 | "parentId": "1-4", 343 | "value": "steps", 344 | "label": "Steps 步骤条", 345 | "state": 0, 346 | "children": null 347 | }], 348 | "state": 0 349 | }, { 350 | "id": "1-5", 351 | "parentId": "1", 352 | "value": "others", 353 | "label": "Others", 354 | "children": [{ 355 | "id": "1-5-0", 356 | "parentId": "1-5", 357 | "value": "dialog", 358 | "label": "Dialog 对话框", 359 | "state": 0, 360 | "children": null 361 | }, { 362 | "id": "1-5-1", 363 | "parentId": "1-5", 364 | "value": "tooltip", 365 | "label": "Tooltip 文字提示", 366 | "state": 1, 367 | "children": null 368 | }, { 369 | "id": "1-5-2", 370 | "parentId": "1-5", 371 | "value": "popover", 372 | "label": "Popover 弹出框", 373 | "state": 0, 374 | "children": null 375 | }, { 376 | "id": "1-5-3", 377 | "parentId": "1-5", 378 | "value": "card", 379 | "label": "Card 卡片", 380 | "state": 1, 381 | "children": null 382 | }, { 383 | "id": "1-5-4", 384 | "parentId": "1-5", 385 | "value": "carousel", 386 | "label": "Carousel 走马灯", 387 | "state": 0, 388 | "children": null 389 | }, { 390 | "id": "1-5-5", 391 | "parentId": "1-5", 392 | "value": "collapse", 393 | "label": "Collapse 折叠面板", 394 | "state": 1, 395 | "children": null 396 | }], 397 | "state": 1 398 | }], 399 | "state": 1 400 | }, { 401 | "id": "2", 402 | "parentId": null, 403 | "value": "ziyuan", 404 | "label": "资源", 405 | "children": [{ 406 | "id": "2-0", 407 | "parentId": "2", 408 | "value": "axure", 409 | "label": "Axure Components", 410 | "state": 0, 411 | "children": null 412 | }, { 413 | "id": "2-1", 414 | "parentId": "2", 415 | "value": "sketch", 416 | "label": "Sketch Templates", 417 | "state": 1, 418 | "children": null 419 | }, { 420 | "id": "2-2", 421 | "parentId": "2", 422 | "value": "jiaohu", 423 | "label": "组件交互文档", 424 | "state": 0, 425 | "children": null 426 | }], 427 | "state": 0 428 | }] -------------------------------------------------------------------------------- /src/components/MTable.js: -------------------------------------------------------------------------------- 1 | import Sortable from 'sortablejs' 2 | import ExportCsv from '../utils/export-csv' 3 | import createTag from './createTag' 4 | import { currency } from '../utils/index' 5 | const createTableColumn = function (h, columns) { 6 | const { filtetag, getKey } = this 7 | return columns.map(column => { 8 | const children = column.children || [] 9 | return h('el-table-column', { 10 | props: { 11 | ...column, 12 | className: column.className || column.el, 13 | align: column.align || 'center', 14 | filterMethod: column.filters ? filtetag.bind(null, column) : null 15 | }, 16 | key: getKey(column.prop), 17 | scopedSlots: { 18 | default: scope => createTag.call(this, h, { 19 | column: this.getColumns(column, scope), 20 | row: scope.row, 21 | $index: scope.$index 22 | }) 23 | } 24 | }, createTableColumn.call(this, h, children)) 25 | }) 26 | } 27 | 28 | const createTable = function (h) { 29 | const { 30 | list, stripe, 31 | border, summaryMethod, 32 | summaryDefault, isShowSummary, 33 | $listeners, 34 | $attrs, 35 | expand, 36 | selection, 37 | selectable, 38 | showNum, 39 | reserveSelection, 40 | numTitle, 41 | numFiexd, 42 | numWidth, 43 | page, 44 | columns, 45 | buttonWidth, 46 | buttonAlign, 47 | buttonFixed, 48 | buttonLabel, 49 | mergeRow, 50 | mergeColumn, 51 | arraySpanMethod, 52 | spanMethod 53 | } = this 54 | const children = [] 55 | if (expand) { 56 | children.push(h('el-table-column', { 57 | props: { 58 | type: 'expand' 59 | }, 60 | key: 'expand', 61 | scopedSlots: { 62 | default: this.$scopedSlots.expand ? props => this.$scopedSlots.expand(props) : null 63 | } 64 | })) 65 | } 66 | if (selection && list.length) { 67 | children.push( 68 | h('el-table-column', { 69 | props: { 70 | type: 'selection', 71 | selectable, 72 | reserveSelection 73 | }, 74 | key: 'selection' 75 | }) 76 | ) 77 | } 78 | if (showNum && list.length) { 79 | const getNum = scope => scope.$index + 1 + ((page.pageNum - 1) * page.pageSize) 80 | children.push( 81 | h('el-table-column', { 82 | props: { 83 | label: numTitle, 84 | align: 'center', 85 | width: numWidth || 60, 86 | reserveSelection, 87 | fixed: numFiexd || (columns[0] && columns[0].fixed) 88 | }, 89 | key: 'showNum', 90 | scopedSlots: { 91 | default: this.$scopedSlots.num ? props => this.$scopedSlots.mnum({ ...props, num: getNum(props) }) : props => getNum(props) 92 | } 93 | }) 94 | ) 95 | } 96 | if (this.$scopedSlots.button) { 97 | children.push(h('el-table-column', { 98 | props: { 99 | width: buttonWidth, 100 | align: buttonAlign || 'center', 101 | fixed: buttonFixed, 102 | label: buttonLabel 103 | }, 104 | key: 'button', 105 | scopedSlots: { 106 | default: props => this.$scopedSlots.button(props) 107 | } 108 | })) 109 | } 110 | 111 | const eventFun = { ...$listeners } 112 | if (eventFun.selectionChange)eventFun['selection-change'] = eventFun.selectionChange 113 | return h('el-table', { 114 | props: { 115 | data: list, 116 | border, 117 | stripe, 118 | summaryMethod: summaryMethod || summaryDefault, 119 | showSummary: isShowSummary, 120 | spanMethod: (mergeRow.length || mergeColumn.length) ? arraySpanMethod : spanMethod, 121 | ...$attrs 122 | }, 123 | ref: 'commontable', 124 | on: eventFun 125 | }, [].concat(children, this.$slots.default || [], createTableColumn.call(this, h, columns))) 126 | } 127 | 128 | const createpagPination = function (h) { 129 | const { showPage, pageAlign, page, pageSizes, layout, cTotal, handleSizeChange, handleCurrentChange, pageOptions = {}, hideOnSinglePage } = this 130 | if (this.$scopedSlots.page) { 131 | return this.$scopedSlots.page() 132 | } 133 | if (showPage) { 134 | return h('el-pagination', { 135 | props: { 136 | currentPage: page.pageNum, 137 | pageSize: page.pageSize, 138 | pageSizes, 139 | layout, 140 | total: cTotal, 141 | hideOnSinglePage, 142 | ...pageOptions 143 | }, 144 | on: { 145 | 'size-change': handleSizeChange, 146 | 'current-change': handleCurrentChange 147 | }, 148 | style: { 149 | textAlign: pageAlign 150 | } 151 | }) 152 | } 153 | return null 154 | } 155 | export default { 156 | name: 'MTable', 157 | props: { 158 | tableData: { 159 | type: Array, 160 | default () { 161 | return [] 162 | } 163 | }, 164 | buttonWidth: [String, Number], 165 | numWidth: [String, Number], 166 | buttonAlign: { 167 | type: String, 168 | default: 'center' 169 | }, 170 | pageOptions: Object, 171 | buttonFixed: { 172 | type: String, 173 | default: 'right' 174 | }, 175 | buttonLabel: { 176 | type: String, 177 | default: '操作' 178 | }, 179 | reserveSelection: Boolean, 180 | layout: { 181 | type: String, 182 | default: 'total,sizes,prev, pager, next, jumper' 183 | }, 184 | showNum: { 185 | type: Boolean, 186 | default: true 187 | }, 188 | hideOnSinglePage: { 189 | type: Boolean, 190 | default: true 191 | }, 192 | selectable: { 193 | type: Function 194 | }, 195 | numFiexd: Boolean, 196 | showPage: { 197 | type: Boolean, 198 | default: true 199 | }, 200 | forced: Boolean, 201 | showsummary: { 202 | type: Boolean, 203 | default: false 204 | }, 205 | summaryMethod: { 206 | type: Function 207 | }, 208 | border: { 209 | type: Boolean, 210 | default: true 211 | }, 212 | stripe: { 213 | type: Boolean, 214 | default: false 215 | }, 216 | numTitle: { 217 | type: String, 218 | default: '序号' 219 | }, 220 | total: Number, 221 | selection: { 222 | type: Boolean, 223 | default: false 224 | }, 225 | expand: Boolean, 226 | columns: { 227 | type: Array, 228 | default () { 229 | return [] 230 | } 231 | }, 232 | page: { 233 | type: Object, 234 | default () { 235 | return { 236 | pageNum: 1, 237 | pageSize: 15, 238 | total: 0 239 | } 240 | } 241 | }, 242 | pageSizes: { 243 | type: Array, 244 | default () { 245 | return [15, 30, 45, 60] 246 | } 247 | }, 248 | mergeRow: { 249 | type: Array, 250 | default: () => [] 251 | }, 252 | mergeColumn: { 253 | type: Array, 254 | default: () => [] 255 | }, 256 | spanMethod: Function, 257 | sumText: { 258 | type: String, 259 | default: '合计' 260 | }, 261 | pageAlign: { 262 | type: String, 263 | default: 'right' 264 | }, 265 | drop: Boolean 266 | }, 267 | inheritAttrs: false, 268 | 269 | computed: { 270 | cTotal () { 271 | const t = this.total || this.page.total 272 | if (t) return t 273 | return this.tableData.length 274 | }, 275 | list () { 276 | const t = this.total || this.page.total 277 | if (!this.showPage || t) { 278 | return this.tableData 279 | } 280 | return this.tableData.filter((obj, index) => { 281 | return ( 282 | index >= (this.page.pageNum - 1) * this.page.pageSize && 283 | index < this.page.pageNum * this.page.pageSize 284 | ) 285 | }) 286 | }, 287 | summaryProps () { 288 | return this.columns.filter(obj => obj.isSummary).map(item => item.prop) 289 | }, 290 | isShowSummary () { 291 | return this.columns.some(obj => obj.isSummary) 292 | }, 293 | mergeRowData () { 294 | if (!this.mergeRow.length) return {} 295 | return this.mergeRow.reduce((x, y) => { 296 | let firstIndex 297 | x[y] = this.list.reduce((l, r, i) => { 298 | const item = this.getPropValue(r,y) 299 | const obj = { 300 | row: 1, 301 | [y]: item 302 | } 303 | if (i !== 0 && item && item === l[i - 1][y]) { 304 | obj.row = 0 305 | l[firstIndex].row += 1 306 | } else { 307 | firstIndex = i 308 | } 309 | l.push(obj) 310 | return l 311 | }, []) 312 | return x 313 | }, {}) 314 | } 315 | }, 316 | watch: { 317 | tableData () { 318 | const count = this.total || this.page.total 319 | if (!count && isNaN(count)) this.page.pageNum = 1 320 | } 321 | }, 322 | methods: { 323 | toggleRowExpansion (...args) { 324 | this.$refs.commontable.toggleRowExpansion(...args) 325 | }, 326 | exportCsv (params = {}) { 327 | if (params.filename) { 328 | if (params.filename.indexOf('.csv') === -1) { 329 | params.filename += '.csv' 330 | } 331 | } else { 332 | params.filename = 'table.csv' 333 | } 334 | let columns = [] 335 | let datas = [] 336 | if (params.columns && params.data) { 337 | columns = params.columns 338 | datas = params.data 339 | } else { 340 | columns = this.columns 341 | if (!('original' in params)) params.original = true 342 | datas = params.original ? this.tableData : this.list 343 | } 344 | const data = ExportCsv.format(columns, datas, params) 345 | if (params.callback) params.callback(data) 346 | else ExportCsv.download(params.filename, data) 347 | }, 348 | getKey (str) { 349 | if (this.forced) return (str || '') + (Math.random() * Date.now()) 350 | return str 351 | }, 352 | getColumns (obj, scope) { 353 | let listeners = null 354 | if (obj.listeners) { 355 | listeners = Object.keys(obj.listeners).reduce((x, y) => { 356 | return { 357 | ...x, 358 | [y]: obj.listeners[y].bind(null, scope) 359 | } 360 | }, {}) 361 | } 362 | return { 363 | ...obj, 364 | disabled: obj.disabled || scope.row.disabled, 365 | readonly: obj.readonly || scope.row.readonly, 366 | listeners 367 | } 368 | }, 369 | summaryDefault (param) { 370 | const { columns, data } = param 371 | const sums = [] 372 | columns.forEach((column, index) => { 373 | if (index === 0) { 374 | sums[index] = this.sumText 375 | return 376 | } else { 377 | if (this.summaryProps.indexOf(column.property) < 0) return 378 | } 379 | const values = data.map(item => Number(item[column.property])) 380 | if (!values.every(value => isNaN(value))) { 381 | sums[index] = values.reduce((prev, curr) => { 382 | const value = Number(curr) 383 | if (!isNaN(value)) { 384 | return prev + curr 385 | } else { 386 | return prev 387 | } 388 | }, 0) 389 | } 390 | sums[index] = parseFloat(sums[index] || 0).toFixed(2) 391 | const prop = column.property 392 | const obj = prop ? this.columns.find(obj => obj.prop === prop) : null 393 | if (obj && sums[index]) { 394 | if (obj.isCurrency) { 395 | sums[index] = (sums[index] + '').replace( 396 | /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, 397 | '$&,' 398 | ) 399 | } else if (obj.type === 'currency') { 400 | sums[index] = currency(sums[index], obj.currency, obj.decimals) 401 | } 402 | if (obj.unit)sums[index] = sums[index] + obj.unit 403 | } 404 | }) 405 | return sums 406 | }, 407 | handleSizeChange (val) { 408 | this.page.pageSize = val 409 | if (this.page.pageNum > Math.ceil(this.page.total / val)) return 410 | this.$emit('pageChange', this.page) 411 | }, 412 | handleCurrentChange (val) { 413 | this.page.pageNum = val 414 | this.$emit('pageChange', this.page) 415 | }, 416 | toggleRowSelection (rows = [], type) { 417 | this.$nextTick(() => { 418 | rows.forEach(row => { 419 | this.$refs.commontable.toggleRowSelection(row, type) 420 | }) 421 | }) 422 | }, 423 | clearSelection () { 424 | this.$refs.commontable.clearSelection() 425 | }, 426 | getPropValue (row,str) { 427 | str = str.replace(/(\.\d)/g, '[$1]').replace(/\.\[/g, '[') 428 | const Fn = Function 429 | try { 430 | return new Fn(`return this.${str}`).call(row) 431 | } catch (error) { 432 | return null 433 | } 434 | }, 435 | filtetag (column, value, row) { 436 | if (typeof column.filterMethod === 'function') { 437 | return column.filterMethod(column, value, row) 438 | } else { 439 | return this.getPropValue(row,column.prop) === value 440 | } 441 | }, 442 | arraySpanMethod ({ row, column, rowIndex }) { 443 | const arr = column.property ? this.mergeRowData[column.property] : null 444 | let rowspan = 1; let colspan = 1 445 | if (arr) { 446 | rowspan = arr[rowIndex].row 447 | } 448 | if (this.mergeColumn.length) { 449 | if (this.mergeColumn.indexOf(column.property) > -1) { 450 | const props = this.columns.map(obj => obj.prop) 451 | const index = props.indexOf(column.property) 452 | let canmerge = true 453 | colspan = props.reduce((x, y, i) => { 454 | if (i > index && canmerge) { 455 | if (this.getPropValue(row,y) === undefined) { 456 | x += 1 457 | } else { 458 | canmerge = false 459 | } 460 | } 461 | return x 462 | }, 1) 463 | } else if (column.property && this.getPropValue(row,column.property) === undefined) { 464 | colspan = 0 465 | } 466 | } 467 | 468 | return [rowspan, colspan] 469 | }, 470 | rowDrop () { 471 | const tbody = this.$el.querySelector('.el-table__body-wrapper tbody') 472 | const _this = this 473 | Sortable.create(tbody, { 474 | onEnd ({ newIndex, oldIndex }) { 475 | const copyData = JSON.parse(JSON.stringify(_this.tableData)) 476 | const currRow = copyData.splice(oldIndex, 1)[0] 477 | copyData.splice(newIndex, 0, currRow) 478 | _this.$emit('drop-change', copyData) 479 | } 480 | }) 481 | } 482 | }, 483 | render (h) { 484 | return h('div', null, [ 485 | createTable.call(this, h), 486 | createpagPination.call(this, h) 487 | ]) 488 | }, 489 | mounted () { 490 | if (this.drop) { 491 | this.rowDrop() 492 | } 493 | } 494 | } 495 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("sortablejs")):"function"==typeof define&&define.amd?define(["sortablejs"],t):e.mcommon=t(null)}(this,function(e){"use strict";function t(e,t){var n=t.column,r=t.row,i=void 0===r?{}:r,o=t.$index,l=null,a=this.scopedSlots||this.$scopedSlots,u=this.slots&&this.slots();return a&&n.prop&&a[n.prop]?l=a[n.prop]({row:i,column:n,$index:o}):u&&n.prop&&u[n.prop]&&(l=u[n.prop]),l||e("MItem",{props:{row:i,column:n,$index:o}})}e=e&&e.hasOwnProperty("default")?e.default:e;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},i=Object.assign||function(e){for(var t=1;t0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"¥",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2;if(e=parseFloat(e),!isFinite(e)||!e&&0!==e)return"";var r=Math.abs(e).toFixed(n),i=n?r.slice(0,-1-n):r,o=i.length%3,l=o>0?i.slice(0,o)+(i.length>3?",":""):"",a=n?r.slice(-1-n):"";return t+(e<0?" -":" ")+l+i.slice(o).replace(/(\d{3})(?=\d)/g,"$1,")+a},s=["maxlength","minlenght","rows","autocomplete","name","readonly","max","min","step","autofocus","form"],c={name:"MItem",props:{row:{type:Object,required:!0},column:{type:Object,required:!0},$index:Number},data:function(){return{isForce:!1}},watch:{row:function(e,t){this.$parent.clearValidate&&e!==t&&this.$nextTick(this.$parent.clearValidate)}},computed:{computedColumn:function(){return i({},this.column,this.column.getColumn&&this.column.getColumn(this.row)||{})},componentType:function(){var e=this.computedColumn.el;return e?"mSelect"===e||"MSelect"===e||"select"===e||"el-select"===e?"m-select":e.startsWith("el-")?e:"el-"+e:null},valueKey:function(){return this.computedColumn.valueKey?this.computedColumn.valueKey:{label:"label",value:"value"}},modelComputed:{get:function(){var e=null;try{e=this.getStrFunction("this.row."+this.column.prop)}catch(e){this.setRowKey(null)}return"currency"===this.column.type?this.isForce?e:u(e,this.column.currency,this.column.decimals):e},set:function(e){var t=this.computedColumn,n=t.type,r=t.trim,i=t.nullString,o=void 0===i||i;if("currency"===n||"number"===n){/^-?[0-9]*\.?\d*$/g.test(e)||(e=e.substr(0,e.length-1))}"el-input"===this.componentType&&(r&&(e=e.trim()),o&&""===e&&(e=null));try{void 0===this.getStrFunction("this.row."+this.computedColumn.prop)?this.setRowKey(e):this.getStrFunction("this.row."+this.computedColumn.prop+" = value")}catch(t){this.setRowKey(e)}}}},methods:{getStrFunction:function(e){return e=e.replace(/(\.\d)/g,"[$1]").replace(/\.\[/g,"["),new Function("return "+e).call(this)},setRowKey:function(e){if(this.computedColumn.prop&&this.row){var t=this.computedColumn.prop.replace(/\[(\w+)\]/g,".$1").replace(/^\./,"").split("."),n=t.shift(),r=t.length-1;if(r>=0){var i=this.row[n]||{},o=t.reduce(function(t,n,o){return o===r?(t[n]=e,i):(t[n]||(t[n]={}),t[n])},i);this.$set(this.row,n,JSON.parse(JSON.stringify(o)))}else this.$set(this.row,n,e)}},getParams:function(){var e={};if(this.computedColumn.params&&"object"===n(this.computedColumn.params))for(var t in this.computedColumn.params){var r=void 0;try{r=this.getStrFunction("this.row."+this.computedColumn.params[t])}catch(e){}e[t]=void 0!==r?r:this.computedColumn.params[t]}return e}},render:function(e){var t=this,n=this.row,r=(this.column,this.$index),o=this.computedColumn,l=this.modelComputed,a=this.componentType,u=this.valueKey,c=this.getParams;if(a){var p=void 0!==o.placeholder?o.placeholder:o.label,h=i({},o.listeners||{},{input:function(e){t.modelComputed=e,o.listeners&&o.listeners.input&&o.listeners.input(e)}});o.listeners&&o.listeners.currentObj&&(h.currentObj=function(e){return o.listeners.currentObj(e,n,r)});if(["m-select","el-checkbox-group","el-radio-group"].includes(a)){var d="";"button"===o.type&&(d="-button");var m="m-select"!==a?function(e,t,n,r){return(n.dataList||n.list||[]).map(function(o){var l=void 0;return l=n.slots&&n.slots.default?[n.slots.default.call(null,e,o)]:o[r.label],e(t,{props:i({},n,{label:n.props?o[n.props.value]:o[r.value],disabled:o.disabled||!1}),key:o[r.label]},l)})}(e,"el-checkbox-group"===a?"el-checkbox"+d:"el-radio"+d,o,u):null;return e(a,{props:i({},o,{placeholder:p,params:"m-select"===a?c(o):null,value:l,customRender:o.slots&&o.slots.default?o.slots.default:null}),attrs:"m-select"===a?o:null,on:h},m)}"el-input"===a&&"currency"===o.type&&(h.blur=function(){var e;t.isForce=!1,o.listeners&&o.listeners.blur&&(e=o.listeners).blur.apply(e,arguments)},h.focus=function(){var e;t.isForce=!0,o.listeners&&o.listeners.focus&&(e=o.listeners).focus.apply(e,arguments)});var f=o.slots||{},g=[],y={};Object.keys(f).forEach(function(t){"function"==typeof f[t]?y[t]=f[t].bind(null,e):g.push(e("template",{slot:t},[f[t]]))});var v=s.reduce(function(e,n){return t.computedColumn[n]&&(e[n]=t.computedColumn[n]),e},{placeholder:p});return e(a,{props:i({filterable:!0},o,{value:l,columnOptions:o,label:"el-checkbox"===a||"el-radio"===a?null:o.label}),attrs:v,scopedSlots:y,on:h},g)}return("function"==typeof o.render?o.render(e,{row:n,computedColumn:o,$index:r}):o.render)||e("span",{class:"item-container",style:{"word-break":"break-all"}},o.format?o.format(n):l)}},p={name:"MSelect",props:{params:{type:Object,default:function(){return{}}},valueKey:{type:Object,default:function(){return{label:"label",value:"value"}}},nullRequest:Boolean,value:{type:[String,Boolean,Number,Array],default:""},dataList:Array,multiple:Boolean,showMsg:Boolean,getList:Function,remote:Boolean,customRender:Function,notClear:Boolean},data:function(){return{list:[],currentValue:"",loading:!1,selectObj:{}}},watch:{params:function(e,t){(function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return t!==n&&(a(t)!==a(n)||null===t||null===n||("Array"===a(t)?t.length!==n.length||t.some(function(t,i){return e(t,n[i],r)}):"Object"===a(t)?r?t[r]!==n[r]:Object.keys(t).some(function(i){return e(t[i],n[i],r)}):"Date"!==a(t)||t.getTime()!==n.getTime()))})(e,t)&&this.pageInit()},value:function(e){this.setCurrentValue()},currentValue:function(e){this.$emit("input",e),this.getCurrentObj()},dataList:function(e){this.list=e},list:function(e,t){var n=this;t&&t.length&&!this.notClear&&this.changeCurrentValue();var r=e.filter(function(e){return e.checked});!r.length||this.currentValue||Array.isArray(this.currentValue)&&this.currentValue.length||(this.multiple?this.currentValue=r.map(function(e){return e[n.valueKey.value]}):this.currentValue=r[0][this.valueKey.value])}},created:function(){this.setCurrentValue(),this.dataList?(this.list=this.dataList,this.currentValue&&this.getCurrentObj()):this.pageInit()},methods:{setCurrentValue:function(){this.multiple?Array.isArray(this.value)?this.currentValue=this.value:"string"==typeof this.value&&this.value?this.currentValue=this.value.split(","):this.currentValue=[]:this.currentValue=this.value},changeCurrentValue:function(){var e=this;this.list.length?this.multiple?this.currentValue&&this.currentValue.length&&(this.currentValue=this.currentValue.filter(function(t){return e.list.some(function(n){return n[e.valueKey.value]===t})})):null!==this.currentValue&&void 0!==this.currentValue&&""!==this.currentValue&&!this.list.some(function(t){return t[e.valueKey.value]===e.currentValue})&&(this.currentValue=null):this.multiple?this.currentValue=[]:this.currentValue=""},pageInit:function(){var e=this,t=Object.keys(this.params);if(t.length&&(t.some(function(t){return null===e.params[t]})&&!this.nullRequest))return;this.getData()},getCurrentObj:function(){var e=this;if(this.list.length){var t=null,n=this.valueKey.value;this.multiple?(t=[],this.currentValue.forEach(function(r){var i=e.list.find(function(e){return e[n]===r});i&&t.push(i)})):t=this.currentValue&&this.list.find(function(t){return t[n]===e.currentValue})||{},this.selectObj=t,this.$emit("currentObj",t)}},remoteMethod:function(e){this.getData({keyWord:e})},getData:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.getList&&(this.loading=!0,this.getList(i({},this.params,t),this.showMsg).then(function(t){var n=Array.isArray(t)?t:t.data||[];e.list=n,e.$emit("selectList",e.list),e.loading=!1}).catch(function(t){return e.list=[],e.loading=!1,Promise.reject(t)}))}},render:function(e){var t=this,n=this.list,r=this.valueKey,o=this.multiple,l=this.loading,a=this.currentValue,u=this.remoteMethod,s=this.$attrs,c=this.$listeners,p=this.customRender,h=this.remote,d=i({},c,{input:function(e){t.currentValue=e,c.input&&c.input(e)}});this.remote&&!d.clear&&(d.clear=u);var m=i({},s);return delete m.valueKey,e("el-select",{props:i({loading:l,value:a,loadingText:"加载中",filterable:!0,clearable:!0,remote:h||!1,remoteMethod:h?u:void 0,multiple:o},m),style:{width:"100%"},on:d},[n.map(function(t){return e("el-option",{props:{label:t[r.label],value:t[r.value],disabled:t.disabled},key:t[r.value]},[p?p(e,t):null])})])}},h=function(e){var t=navigator.userAgent;return"ie"===e?!!(t.indexOf("compatible")>-1&&t.indexOf("MSIE")>-1)&&(new RegExp("MSIE (\\d+\\.\\d+);").test(t),parseFloat(RegExp.$1)):t.indexOf(e)>-1},d=function(e,t,n){var r=n.separator,i=n.quoted,o=t.map(function(e){return i?'"'+(e="string"==typeof e?e.replace(/"/g,'"'):e)+'"':e});e.push(o.join(r))},m={separator:",",quoted:!1},f={_isIE11:function(){var e=0,t=/MSIE (\d+\.\d+);/.test(navigator.userAgent),n=!!navigator.userAgent.match(/Trident\/7.0/),r=navigator.userAgent.indexOf("rv:11.0");return t&&(e=Number(RegExp.$1)),-1!==navigator.appVersion.indexOf("MSIE 10")&&(e=10),n&&-1!==r&&(e=11),11===e},_isEdge:function(){return/Edge/.test(navigator.userAgent)},_getDownloadUrl:function(e){if(window.Blob&&window.URL&&window.URL.createObjectURL){var t=new window.Blob(["\ufeff"+e],{type:"text/csv"});return URL.createObjectURL(t)}return"data:attachment/csv;charset=utf-8,\ufeff"+encodeURIComponent(e)},download:function(e,t){if(h("ie")&&h("ie")<10){var n=window.top.open("about:blank","_blank");n.document.charset="utf-8",n.document.write(t),n.document.close(),n.document.execCommand("SaveAs",e),n.close()}else if(10===h("ie")||this._isIE11()||this._isEdge()){var r=new Blob(["\ufeff"+t],{type:"text/csv"});navigator.msSaveBlob(r,e)}else{var i=document.createElement("a");i.download=e,i.href=this._getDownloadUrl(t),document.body.appendChild(i),i.click(),document.body.removeChild(i)}},getStrFunction:function(e,t){e=e.replace(/(\.\d)/g,"[$1]").replace(/\.\[/g,"[");var n=Function;try{return new n("return this."+e).call(t)}catch(e){return}},format:function(e,t,n){var r=this;n=Object.assign({},m,n);var i=[],o=e.map(function(e){return e.label});return d(i,o,n),t.forEach(function(t){Array.isArray(t)||(t=e.map(function(e){var n=void 0;return("\t"+(n=void 0!==(n="function"==typeof e.format?e.format(t):r.getStrFunction(e.prop,t))?n:"")).replace(/,/g,"，")})),d(i,t,n)}),i.join("\r\n")}},g=function(e){var n=this,r=this.list,o=this.stripe,l=this.border,a=this.summaryMethod,u=this.summaryDefault,s=this.isShowSummary,c=this.$listeners,p=this.$attrs,h=this.expand,d=this.selection,m=this.selectable,f=this.showNum,g=this.reserveSelection,y=this.numTitle,v=this.numFiexd,b=this.numWidth,w=this.page,S=this.columns,x=this.buttonWidth,C=this.buttonAlign,O=this.buttonFixed,$=this.buttonLabel,V=this.mergeRow,j=this.mergeColumn,M=this.arraySpanMethod,F=this.spanMethod,N=[];if(h&&N.push(e("el-table-column",{props:{type:"expand"},key:"expand",scopedSlots:{default:this.$scopedSlots.expand?function(e){return n.$scopedSlots.expand(e)}:null}})),d&&r.length&&N.push(e("el-table-column",{props:{type:"selection",selectable:m,reserveSelection:g},key:"selection"})),f&&r.length){var R=function(e){return e.$index+1+(w.pageNum-1)*w.pageSize};N.push(e("el-table-column",{props:{label:y,align:"center",width:b||60,reserveSelection:g,fixed:v||S[0]&&S[0].fixed},key:"showNum",scopedSlots:{default:this.$scopedSlots.num?function(e){return n.$scopedSlots.mnum(i({},e,{num:R(e)}))}:function(e){return R(e)}}}))}this.$scopedSlots.button&&N.push(e("el-table-column",{props:{width:x,align:C||"center",fixed:O,label:$},key:"button",scopedSlots:{default:function(e){return n.$scopedSlots.button(e)}}}));var A=i({},c);return A.selectionChange&&(A["selection-change"]=A.selectionChange),e("el-table",{props:i({data:r,border:l,stripe:o,summaryMethod:a||u,showSummary:s,spanMethod:V.length||j.length?M:F},p),ref:"commontable",on:A},[].concat(N,this.$slots.default||[],function e(n,r){var o=this,l=this.filtetag,a=this.getKey;return r.map(function(r){var u=r.children||[];return n("el-table-column",{props:i({},r,{className:r.className||r.el,align:r.align||"center",filterMethod:r.filters?l.bind(null,r):null}),key:a(r.prop),scopedSlots:{default:function(e){return t.call(o,n,{column:o.getColumns(r,e),row:e.row,$index:e.$index})}}},e.call(o,n,u))})}.call(this,e,S)))},y={name:"MTable",props:{tableData:{type:Array,default:function(){return[]}},buttonWidth:[String,Number],numWidth:[String,Number],buttonAlign:{type:String,default:"center"},pageOptions:Object,buttonFixed:{type:String,default:"right"},buttonLabel:{type:String,default:"操作"},reserveSelection:Boolean,layout:{type:String,default:"total,sizes,prev, pager, next, jumper"},showNum:{type:Boolean,default:!0},hideOnSinglePage:{type:Boolean,default:!0},selectable:{type:Function},numFiexd:Boolean,showPage:{type:Boolean,default:!0},forced:Boolean,showsummary:{type:Boolean,default:!1},summaryMethod:{type:Function},border:{type:Boolean,default:!0},stripe:{type:Boolean,default:!1},numTitle:{type:String,default:"序号"},total:Number,selection:{type:Boolean,default:!1},expand:Boolean,columns:{type:Array,default:function(){return[]}},page:{type:Object,default:function(){return{pageNum:1,pageSize:15,total:0}}},pageSizes:{type:Array,default:function(){return[15,30,45,60]}},mergeRow:{type:Array,default:function(){return[]}},mergeColumn:{type:Array,default:function(){return[]}},spanMethod:Function,sumText:{type:String,default:"合计"},pageAlign:{type:String,default:"right"},drop:Boolean},inheritAttrs:!1,computed:{cTotal:function(){var e=this.total||this.page.total;return e||this.tableData.length},list:function(){var e=this,t=this.total||this.page.total;return!this.showPage||t?this.tableData:this.tableData.filter(function(t,n){return n>=(e.page.pageNum-1)*e.page.pageSize&&n0&&void 0!==arguments[0]?arguments[0]:{};e.filename?-1===e.filename.indexOf(".csv")&&(e.filename+=".csv"):e.filename="table.csv";var t=[],n=[];e.columns&&e.data?(t=e.columns,n=e.data):(t=this.columns,"original"in e||(e.original=!0),n=e.original?this.tableData:this.list);var r=f.format(t,n,e);e.callback?e.callback(r):f.download(e.filename,r)},getKey:function(e){return this.forced?(e||"")+Math.random()*Date.now():e},getColumns:function(e,t){var n=null;return e.listeners&&(n=Object.keys(e.listeners).reduce(function(n,o){return i({},n,r({},o,e.listeners[o].bind(null,t)))},{})),i({},e,{disabled:e.disabled||t.row.disabled,readonly:e.readonly||t.row.readonly,listeners:n})},summaryDefault:function(e){var t=this,n=e.columns,r=e.data,i=[];return n.forEach(function(e,n){if(0!==n){if(!(t.summaryProps.indexOf(e.property)<0)){var o=r.map(function(t){return Number(t[e.property])});o.every(function(e){return isNaN(e)})||(i[n]=o.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)),i[n]=parseFloat(i[n]||0).toFixed(2);var l=e.property,a=l?t.columns.find(function(e){return e.prop===l}):null;a&&i[n]&&(a.isCurrency?i[n]=(i[n]+"").replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,"$&,"):"currency"===a.type&&(i[n]=u(i[n],a.currency,a.decimals)),a.unit&&(i[n]=i[n]+a.unit))}}else i[n]=t.sumText}),i},handleSizeChange:function(e){this.page.pageSize=e,this.$emit("pageChange",this.page)},handleCurrentChange:function(e){this.page.pageNum=e,this.$emit("pageChange",this.page)},toggleRowSelection:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],n=arguments[1];this.$nextTick(function(){t.forEach(function(t){e.$refs.commontable.toggleRowSelection(t,n)})})},clearSelection:function(){this.$refs.commontable.clearSelection()},getPropValue:function(e,t){t=t.replace(/(\.\d)/g,"[$1]").replace(/\.\[/g,"[");var n=Function;try{return new n("return this."+t).call(e)}catch(e){return null}},filtetag:function(e,t,n){return"function"==typeof e.filterMethod?e.filterMethod(e,t,n):this.getPropValue(n,e.prop)===t},arraySpanMethod:function(e){var t=this,n=e.row,r=e.column,i=e.rowIndex,o=r.property?this.mergeRowData[r.property]:null,l=1,a=1;if(o&&(l=o[i].row),this.mergeColumn.length)if(this.mergeColumn.indexOf(r.property)>-1){var u=this.columns.map(function(e){return e.prop}),s=u.indexOf(r.property),c=!0;a=u.reduce(function(e,r,i){return i>s&&c&&(void 0===t.getPropValue(n,r)?e+=1:c=!1),e},1)}else r.property&&void 0===this.getPropValue(n,r.property)&&(a=0);return[l,a]},rowDrop:function(){var t=this.$el.querySelector(".el-table__body-wrapper tbody"),n=this;e.create(t,{onEnd:function(e){var t=e.newIndex,r=e.oldIndex,i=JSON.parse(JSON.stringify(n.tableData)),o=i.splice(r,1)[0];i.splice(t,0,o),n.$emit("drop-change",i)}})}},render:function(e){return e("div",null,[g.call(this,e),function(e){var t=this.showPage,n=this.pageAlign,r=this.page,o=this.pageSizes,l=this.layout,a=this.cTotal,u=this.handleSizeChange,s=this.handleCurrentChange,c=this.pageOptions,p=void 0===c?{}:c,h=this.hideOnSinglePage;return this.$scopedSlots.page?this.$scopedSlots.page():t?e("el-pagination",{props:i({currentPage:r.pageNum,pageSize:r.pageSize,pageSizes:o,layout:l,total:a,hideOnSinglePage:h},p),on:{"size-change":u,"current-change":s},style:{textAlign:n}}):null}.call(this,e)])},mounted:function(){this.drop&&this.rowDrop()}},v=function e(t){if(!e.installed){if(!t.prototype.$ELEMENT)throw new Error("请先安装element-ui");t.component(l.name,l),t.component(c.name,c),t.component(p.name,p),t.component(y.name,y),e.installed=!0}};return window&&window.Vue&&v(window.Vue),{install:v,MForm:l,MItem:c,MSelect:p,MTable:y}}); 2 | -------------------------------------------------------------------------------- /docs/assets/js/16.daed1b13.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[16],{339:function(t,a,s){"use strict";s.r(a);var n=s(1),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),t._v(" "),t._m(1),t._v(" "),s("p",[t._v("以下字段为MSelect的默认配置、扩展事件和选项，其他配置和事件请参照"),s("a",{attrs:{href:"https://element.eleme.io/#/zh-CN/component/select",target:"_blank",rel:"noopener noreferrer"}},[t._v("el-select"),s("OutboundLink")],1)]),t._v(" "),t._m(2),t._v(" "),t._m(3),t._v(" "),t._m(4),t._v(" "),t._m(5),t._v(" "),t._m(6),t._v(" "),s("demo-block",[s("example-mselect-demo",{attrs:{slot:"source"},slot:"source"}),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("ul")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("demo-select"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("基本用法"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":data-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("异步获取数据"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":get-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("远程搜索"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":get-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("remoteMethod"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("remote")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("扩展事件"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@selectList")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("setSelectList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@currentObj")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currentObj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":get-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("getList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":params")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("params"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("自定义模板"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":data-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":custom-render")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customRender"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n \n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("禁用"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":data-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":custom-render")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customRender"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("disabled")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("基础多选"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("multiple")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":data-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("li"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("基础多选自定义模板"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("m-select")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("value1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("multiple")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":data-list")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":custom-render")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("customRender"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("collapse-tags")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(" \n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n value1"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dataList"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"选项1"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"黄金糕"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n disabled"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"选项2"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"双皮奶"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"选项3"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"蚵仔煎"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"选项4"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"龙须面"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n value"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"选项5"')]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"北京烤鸭"')]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n params"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n methods"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("customRender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("h"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" item")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("div"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("span style"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"float: left"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("span"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("span style"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('"float: right; color: #8492a6; font-size: 13px"')]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("item"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("span"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("div"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'getList 参数'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("params"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("reslove")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reslove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remoteMethod")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("params")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remoteMethod 参数'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("params"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Promise")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("reslove")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTimeout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("params"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("keyWord"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reslove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("dataList"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("reslove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2000")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setSelectList")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("arr")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'setSelectList'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("arr"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("currentObj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("obj")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'currentObj'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("lang")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scss"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".demo-select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".li")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 10px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v("label")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 200px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("text-align")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" right"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 0 8px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])],1)],1)}),[function(){var t=this.$createElement,a=this._self._c||t;return a("h1",{attrs:{id:"mselect"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mselect"}},[this._v("#")]),this._v(" MSelect")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"参数配置"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#参数配置"}},[this._v("#")]),this._v(" 参数配置")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[this._v("#")]),this._v(" Props")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("table",[s("thead",[s("tr",[s("th",[t._v("字段")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("类型")]),t._v(" "),s("th",[t._v("默认值")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("params")]),t._v(" "),s("td",[t._v("请求参数")]),t._v(" "),s("td",[t._v("object")]),t._v(" "),s("td",[t._v("{}")])]),t._v(" "),s("tr",[s("td",[t._v("valueKey")]),t._v(" "),s("td",[t._v("对应数据绑定和展示字段")]),t._v(" "),s("td",[t._v("Object")]),t._v(" "),s("td",[t._v("{ label: 'label', value: 'value' }")])]),t._v(" "),s("tr",[s("td",[t._v("dataList")]),t._v(" "),s("td",[t._v("下拉数据")]),t._v(" "),s("td",[t._v("array")]),t._v(" "),s("td",[t._v("[]")])]),t._v(" "),s("tr",[s("td",[t._v("getList")]),t._v(" "),s("td",[t._v("异步获取数据的方法,当dataList不为空时不执行该方法")]),t._v(" "),s("td",[t._v("promise")]),t._v(" "),s("td",[t._v("-")])]),t._v(" "),s("tr",[s("td",[t._v("filterable")]),t._v(" "),s("td",[t._v("是否可搜索")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("true")])]),t._v(" "),s("tr",[s("td",[t._v("clearable")]),t._v(" "),s("td",[t._v("是否可清楚")]),t._v(" "),s("td",[t._v("boolean")]),t._v(" "),s("td",[t._v("true")])]),t._v(" "),s("tr",[s("td",[t._v("customRender")]),t._v(" "),s("td",[t._v("自定义模版")]),t._v(" "),s("td",[t._v("Function")]),t._v(" "),s("td",[t._v("-")])])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[this._v("#")]),this._v(" Events")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("table",[s("thead",[s("tr",[s("th",[t._v("事件名称")]),t._v(" "),s("th",[t._v("说明")]),t._v(" "),s("th",[t._v("回调参数")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[t._v("selectList")]),t._v(" "),s("td",[t._v("当异步请求数据时成功回调")]),t._v(" "),s("td",[t._v("当前下拉数据 array")])]),t._v(" "),s("tr",[s("td",[t._v("currentObj")]),t._v(" "),s("td",[t._v("当前选中或清除时回调")]),t._v(" "),s("td",[t._v("当前选中的数据 object、null")])])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"用法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#用法"}},[this._v("#")]),this._v(" 用法")])}],!1,null,null,null);a.default=e.exports}}]); --------------------------------------------------------------------------------