├── .eslintignore
├── .gitignore
├── README.md
├── _config.yml
├── babel.config.js
├── lib
    ├── Filters
    │   ├── cascader.vue
    │   └── date.vue
    ├── components
    │   └── table-header.js
    ├── css
    │   └── index.css
    ├── dg-table.js
    ├── index.js
    ├── js
    │   ├── Bus.js
    │   ├── hoc.js
    │   └── utils.js
    └── packages
    │   ├── cascader
    │       ├── index.js
    │       └── src
    │       │   └── cascader.js
    │   ├── date-picker
    │       ├── index.js
    │       └── src
    │       │   └── date-picker.js
    │   ├── dg-filter-wrap
    │       ├── index.js
    │       └── src
    │       │   └── filter-wrap.js
    │   └── index.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── js
    │   │   └── simulationapi.js
    │   └── logo.png
    ├── components
    │   ├── Gender.vue
    │   ├── HelloWorld.vue
    │   ├── MyCascader.vue
    │   ├── MyDatePicker.vue
    │   └── myFilter
    │   │   └── MyInput.vue
    └── main.js
└── yarn.lock


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | /dist
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | src
 4 | public
 5 | /src
 6 | /public
 7 | /dist
 8 | /images
 9 | 
10 | # local env files
11 | .env.local
12 | .env.*.local
13 | 
14 | # Log files
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 
19 | # Editor directories and files
20 | .idea
21 | .vscode
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw*
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 由于作者没有编程天赋已经放弃编程 所以这个组件不再更新！
 2 | 
 3 | ## Install
 4 | 
 5 | ```npm
 6 | npm install dg-table -S
 7 | ```
 8 | 
 9 | ## Quick Start
10 | #### main.js
11 | ```js
12 | import Vue from 'Vue'
13 | import Element from 'element-ui'  // 基于element的
14 | import DgTable from 'dg-table'
15 | 
16 | Vue.use(Element)
17 | Vue.use(DgTable)
18 | ```
19 | #### html
20 | ```html
21 | <dg-table></dg-table>
22 | ```
23 | 
24 | ## Browser Suppor
25 | Modern browsers and Internet Explorer 10+.
26 | 
27 | ## [文档地址](https://www.jianshu.com/p/7ad1e0aafc92)
28 | 
29 | ## [demo地址](https://github.com/tccsg/dg-table-demo)
30 | 
31 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/Filters/cascader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="options"
 3 |     ref='cascaderfilter'>
 4 |     <el-cascader
 5 |       style="width:0;height:0;padding:0;top:-10px"
 6 |       :options="config.data"
 7 |       :ref="config.refname"
 8 |       v-model="selectedOptions"
 9 |       @change="handleChange"
10 |       :props="config.myprops">
11 |     </el-cascader>
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import Bus from '../js/Bus.js'
17 | export default {
18 |   props: ['config'],
19 |   data () {
20 |     return {
21 |       selectedOptions: [],
22 |       options: [],
23 |       cascaderVal: ''
24 |     }
25 |   },
26 |   methods: {
27 |     handleChange (value) {
28 |       const { key } = this.config || {}
29 |       let label = this.getLabel(value, this.config.data)
30 |       setTimeout(() => {
31 |         this.$emit('__DGTABLE_GET_FILTER_DATA__', {
32 |           key,
33 |           res: {
34 |             value: value[value.length - 1],
35 |             label
36 |           },
37 |           type: 'cascader'
38 |         })
39 |       }, 0)
40 |     },
41 |     getLabel (value, d) {
42 |       let _value = JSON.parse(JSON.stringify(value))
43 |       let labelstr = ''
44 |       let val = value[0]
45 |       const { config } = this
46 |       for (let i = 0; i < d.length; i++) {
47 |         if (d[i][config.myprops.value] === val) {
48 |           if (d[i] && d[i][config.myprops.children]) {
49 |             _value.splice(0, 1)
50 |             labelstr += this.getLabel(_value, d[i][config.myprops.children])
51 |             return d[i][config.myprops.label] + labelstr
52 |           } else {
53 |             return d[i][config.myprops.label]
54 |           }
55 |         }
56 |       }
57 |     }
58 |   },
59 |   mounted () {
60 |     const { refname = '' } = this.config || {}
61 |     Bus.$on('__OPEN_DGTABLE_CASCADER_FILTER__', fid => {
62 |       if (refname === fid && this.$refs[fid]) {
63 |         this.$refs[fid].handleInput()
64 |       }
65 |     })
66 |   }
67 | }
68 | </script>
69 | 
70 | 


--------------------------------------------------------------------------------
/lib/Filters/date.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <el-date-picker
 4 |       v-model="filterdate"
 5 |       type="daterange"
 6 |       align="right"
 7 |       style="height:0;padding:0;top:-15px"
 8 |       unlink-panels
 9 |       :ref="config.refname"
10 |       @change="changeData"
11 |       range-separator=""
12 |       start-placeholder=""
13 |       end-placeholder=""
14 |       format="yyyy 年 MM 月 dd 日"
15 |       value-format="yyyy-MM-dd"
16 |       :picker-options="pickerOptions2">
17 |     </el-date-picker>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import Bus from '../js/Bus.js'
23 | export default {
24 |   props: ['config'],
25 |   data () {
26 |     return {
27 |       filterdate: '',
28 |       pickerOptions2: {
29 |         shortcuts: [
30 |           {
31 |             text: '最近一周',
32 |             onClick (picker) {
33 |               const end = new Date()
34 |               const start = new Date()
35 |               start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
36 |               picker.$emit('pick', [start, end])
37 |             }
38 |           },
39 |           {
40 |             text: '最近一个月',
41 |             onClick (picker) {
42 |               const end = new Date()
43 |               const start = new Date()
44 |               start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
45 |               picker.$emit('pick', [start, end])
46 |             }
47 |           },
48 |           {
49 |             text: '最近三个月',
50 |             onClick (picker) {
51 |               const end = new Date()
52 |               const start = new Date()
53 |               start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
54 |               picker.$emit('pick', [start, end])
55 |             }
56 |           }
57 |         ]
58 |       }
59 |     }
60 |   },
61 |   mounted () {
62 |     const { refname = '' } = this.config || {}
63 |     Bus.$on('__OPEN_DGTABLE_DATE_FILTER__', fid => {
64 |       if (this.$refs[fid]) {
65 |         if (refname === fid) this.$refs[fid].focus()
66 |       }
67 |     })
68 |   },
69 |   methods: {
70 |     changeData (val) {
71 |       const { key } = this.config || {}
72 | 
73 |       this.$emit('__DGTABLE_GET_FILTER_DATA__', {
74 |         type: 'date',
75 |         key,
76 |         res: {
77 |           value: val
78 |         }
79 |       })
80 |     }
81 |   }
82 | }
83 | </script>


--------------------------------------------------------------------------------
/lib/components/table-header.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @param {*} e 
  3 |  */
  4 | let _fbd = null
  5 | let _curShowFilter = null
  6 | const iconChange = (e, cb, UNID) => {
  7 | 
  8 |   e.cancelBubble = true
  9 |   let iconDom = 
 10 |     document.querySelector(`#${e.currentTarget.id} i`)
 11 |   _fbd = iconDom
 12 |   const filterDoms = 
 13 |     document.querySelectorAll(`#__${UNID}_DGTABLE__ .dg-table_filter-wrap`)
 14 |   const headerIconDoms = 
 15 |     document.querySelectorAll(`#__${UNID}_DGTABLE__ .el-table__header-wrapper .dg-header-icon`)
 16 | 
 17 |   const fixed_doms = document.querySelectorAll(`#__${UNID}_DGTABLE__ .el-table__fixed .dg-header-icon`)
 18 | 
 19 |   for (let i = 0, length = filterDoms.length; i < length; i++) {
 20 |     const filterId = filterDoms[i].getAttribute('dataId')
 21 |     if (filterId === e.currentTarget.id) {
 22 |       filterDoms[i].style.display = 'inline-block'
 23 |       _curShowFilter = filterDoms[i]
 24 |       setFiltersPosition(iconDom, filterDoms[i])
 25 |       typeof cb === 'function' && cb(filterId)
 26 |     } else {
 27 |       filterDoms[i].style.display = 'none'
 28 |     }
 29 |     if (iconDom === headerIconDoms[i]) {
 30 |       if (fixed_doms[i]) fixed_doms[i].style.transform = 'rotate(-180deg)'
 31 |       headerIconDoms[i].style.transform = 'rotate(-180deg)'
 32 |     } else {
 33 |       if (fixed_doms[i]) fixed_doms[i].style.transform = 'rotate(0deg)'
 34 |       headerIconDoms[i].style.transform = 'rotate(0deg)'
 35 |     }
 36 |   }
 37 | }
 38 | 
 39 | function setFiltersPosition (fbd, fd) {
 40 |   if (!fbd) return
 41 |   const div_cell = fbd.offsetParent
 42 |   const th = div_cell.offsetParent
 43 |   const table_wrap = th.offsetParent
 44 | 
 45 |   let offsetLeft = th.offsetLeft
 46 |   let offsetTop = table_wrap.offsetTop + th.offsetHeight - 10
 47 |   fd.style.top = offsetTop + 'px'
 48 |   fd.style.left = offsetLeft + 'px'
 49 | }
 50 | 
 51 | export default {
 52 |   name: 'DgTableHeader',
 53 |   props: {
 54 |     id: String,
 55 |     label: String,
 56 |     config: Object,
 57 |     cb: Function,
 58 |     UNID: String
 59 |   },
 60 |   functional: false,
 61 |   mounted() {
 62 |     if (!window.onresize) {
 63 |       window.onresize = () => {
 64 |         setTimeout(() => {
 65 |           if (_fbd && _curShowFilter)
 66 |             setFiltersPosition(_fbd, _curShowFilter)
 67 |         }, 0)
 68 |       }
 69 |     }
 70 |   },
 71 |   methods: {},
 72 |   render (h) {
 73 |     const { id, config, label, cb, UNID } = this
 74 |     return (
 75 |       config
 76 |         ? h('span', {
 77 |             'class': 'customize_filter',
 78 |             style: 'cursor:pointer;display:inline-block',
 79 |             attrs: {
 80 |               id: id
 81 |             },
 82 |             on: {
 83 |               click: (e) => {
 84 |                 iconChange(e, cb, UNID)
 85 |               }
 86 |             }
 87 |           }, [
 88 |             h('span', {
 89 |               style: 'padding-right:3px;'
 90 |             }, [label]),
 91 |             h('i', {
 92 |               'class': 'dg-header-icon el-icon-caret-bottom',
 93 |               style: 'transition: all .3s'
 94 |             })
 95 |           ])
 96 |         : h('span', {
 97 |             attrs: {
 98 |               'class': 'customize_filter',
 99 |               style: 'display:inline-block'
100 |             }
101 |           }, [
102 |             h('span', {
103 |               attrs: {
104 |                 style: 'padding-right:3px;'
105 |               }
106 |             }, [label])])
107 |     )
108 |   }
109 | }


--------------------------------------------------------------------------------
/lib/css/index.css:
--------------------------------------------------------------------------------
 1 | .dg-filters_hidden-wrap {
 2 |   height: 0;
 3 |   width: 0;
 4 |   position: absolute;
 5 |   left: 0;
 6 |   top: 0;
 7 | }
 8 | .dg-table_filter-wrap {
 9 |   min-width: 100px;
10 |   border: 1px solid #ebeef5;
11 |   border-radius: 2px;
12 |   background-color: #fff;
13 |   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
14 |   box-sizing: border-box;
15 |   margin: 2px 0;
16 |   position: absolute;
17 |   z-index: 9;
18 |   display: none;
19 |   overflow: hidden;
20 | }
21 | .customize_filter.active i{
22 |   transform: rotate(-180deg)
23 | }
24 | .dg-table_filter-wrap.dg-table_filter-hideBg {
25 |   opacity:0;
26 |   /* padding: 10px; */
27 |   box-shadow:none;
28 | }


--------------------------------------------------------------------------------
/lib/dg-table.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import DgTableHeader from './components/table-header'
  3 | import DgTableDateFilter from './filters/date'
  4 | import DgTableCascader from './filters/cascader'
  5 | import Bus from './js/Bus'
  6 | import { Dom } from './js/utils'
  7 | import ElTable from 'element-ui/lib/table'
  8 | 
  9 | // 私有函数的集合 相当于注册函数
 10 | const privateHandlers = [
 11 |   'filter-change'
 12 | ]
 13 | 
 14 | // 私有属性
 15 | const privateProps = [
 16 |   'tableId'
 17 | ]
 18 | 
 19 | // 筛选器点击 部分 特殊筛选器 对应的事件
 20 | const headClickEven = {
 21 |   'date': '__OPEN_DGTABLE_DATE_FILTER__',
 22 |   'cascader': '__OPEN_DGTABLE_CASCADER_FILTER__'
 23 | }
 24 | 
 25 | const filtersData = {
 26 |   regFilters: {},
 27 |   filterComponents: {
 28 |     'date': DgTableDateFilter,
 29 |     'cascader': DgTableCascader
 30 |   },
 31 |   curFilterId: ''
 32 | }
 33 | 
 34 | const createFilterId = (UNID, ft, p) => {
 35 |   return `__${UNID}_${ft}_${p}__`
 36 | }
 37 | 
 38 | const headClick = (filterId) => {
 39 |   const { regFilters } = filtersData
 40 |   const { type } = regFilters[filterId]
 41 |   filtersData.curFilterId = filterId
 42 |   if (headClickEven[type]) {
 43 |     Bus.$emit(headClickEven[type], filterId)
 44 |   }
 45 | }
 46 | 
 47 | // 规范化表格props 和 列配置 数据
 48 | const normalizeProps = (context) => {
 49 |   const props = JSON.parse(JSON.stringify(context.$props || {}))
 50 |   
 51 |   for (let k in props) {
 52 |     if (privateProps.includes(k)) {
 53 |       delete props[k]
 54 |     }
 55 |   }
 56 |   delete props.configs
 57 |   const on = context._events
 58 |   const scopedSlots = context.$scopedSlots
 59 |   const attrs = {}
 60 | 
 61 | 
 62 |   let privateOn = Object.create(null)
 63 |   for (let k in on) {
 64 |     if (privateHandlers.includes(k)) {
 65 |       privateOn[k] = on[k]
 66 |     }
 67 |   }
 68 | 
 69 |   return {
 70 |     on,
 71 |     scopedSlots,
 72 |     attrs,
 73 |     props,
 74 |     privateOn
 75 |   }
 76 | }
 77 | // 渲染 需要的筛选器
 78 | const renderFilters = (h, configs, on, UNID) => {
 79 |   const { regFilters, filterComponents } = filtersData
 80 |   const { filterConfig = null, columnConfig } = configs
 81 | 
 82 |   let filter_id = 'null'
 83 |   let willRenderFilter = null
 84 |   if (filterConfig) {
 85 |     filter_id = createFilterId(
 86 |       UNID,
 87 |       filterConfig.type,
 88 |       columnConfig.prop
 89 |     )
 90 |     if (!regFilters[filter_id]) {
 91 |       regFilters[filter_id] = filterConfig
 92 |     }
 93 |     if (filterComponents[filterConfig.type]) {
 94 |       if (!filterConfig.component) {
 95 |         willRenderFilter = filterComponents[filterConfig.type]
 96 |       } else {
 97 |         willRenderFilter = filterConfig.component
 98 |       }
 99 |     } else if(filterConfig.component
100 |         && filterConfig.type === 'custom'
101 |       ) {
102 |       willRenderFilter = filterConfig.component
103 |     }
104 |   }
105 |   let _private = {}
106 |   if (filterConfig) {
107 |     _private = filterConfig.type === 'custom' 
108 |       ? {}
109 |       : {
110 |           refname: filter_id,
111 |           key: columnConfig.prop,
112 |         }
113 |   }
114 |   return (
115 |     filterConfig
116 |       ? h('div', {
117 |           attrs: {
118 |             dataId:filter_id,
119 |             'class': filterComponents[filterConfig.type]
120 |                     ? 'dg-table_filter-wrap dg-table_filter-hideBg'
121 |                     : 'dg-table_filter-wrap'
122 |           }
123 |         }, [
124 |             h(willRenderFilter, {
125 |                 props: {
126 |                   config: Object.assign({}, _private, filterConfig.props || {})
127 |                 },
128 |                 on: {
129 |                   __DGTABLE_GET_FILTER_DATA__: (res) => {
130 |                     hideAllFilter(null, UNID)
131 |                     if (typeof on['filter-change'] === 'function') {
132 |                       on['filter-change'](res)
133 |                     }
134 |                   },
135 |                   __CUSTOM_FILTER_DATA__: (custom_data) => {
136 |                     hideAllFilter(null, UNID)
137 |                     if (typeof on['filter-change'] === 'function') {
138 |                       let res = Object.create(null)
139 |                       if (custom_data.value !== undefined) {
140 |                         res.value = custom_data.value
141 |                       }
142 |                       if (custom_data.label !== undefined) {
143 |                         res.label = custom_data.label
144 |                       }
145 |                       on['filter-change']({
146 |                         key: columnConfig.prop,
147 |                         type: 'custom',
148 |                         res
149 |                       })
150 |                     }
151 |                   }
152 |                 }
153 |             })
154 |           ])
155 |       : null
156 |   )
157 | }
158 | const hideAllFilter = (e, UNID) => {
159 |   const headerIconDoms = 
160 |     document.querySelectorAll(`#__${UNID}_DGTABLE__ .dg-header-icon`)
161 |   const filterDoms = 
162 |     document.querySelectorAll(`#__${UNID}_DGTABLE__ .dg-table_filter-wrap`)
163 |   const cellDom = e ? Dom.parents(e.target, '.cell') : null
164 |   let id = ''
165 |   
166 |   const specialDom = e ? Dom.parents(e.target, '.el-popper') : null
167 | 
168 |   if (cellDom &&
169 |       cellDom.childNodes &&
170 |       cellDom.childNodes[0] &&
171 |       cellDom.childNodes[0].getAttribute
172 |     ) {
173 |     id = cellDom.childNodes[0].getAttribute('id')
174 |   }
175 |   if (id) {
176 |     for (let i = 0, length = headerIconDoms.length; i < length; i++) {
177 |       if (headerIconDoms[i].parentNode.getAttribute('id') !== id) {
178 |         filterDoms[i] && (filterDoms[i].style.display = 'none')
179 |         headerIconDoms[i] && (headerIconDoms[i].style.transform = 'rotate(0deg)')
180 |       }
181 |     }
182 |   } else if (!specialDom) {
183 |     for (let i = 0, length = headerIconDoms.length; i < length; i++) {
184 |       filterDoms[i] && (filterDoms[i].style.display = 'none')
185 |       headerIconDoms[i] && (headerIconDoms[i].style.transform = 'rotate(0deg)')
186 |     }
187 |   }
188 | }
189 | 
190 | export default {
191 |   props: Object.assign({}, {
192 |     configs: Array,
193 |     tableId: String
194 |   }, ElTable.props),
195 |   name: 'dg-table',
196 |   functional: false,
197 |   methods: {},
198 |   beforeUpdate () {
199 |     // console.log('dg-table update')
200 |   },
201 |   render (h) {
202 |     const UNID = this.tableId || 'DGTABLE'
203 |     const {
204 |       on,
205 |       scopedSlots,
206 |       props,
207 |       privateOn } = normalizeProps(this._self)
208 |     const configs = this.configs ||  []
209 |     let filterVnodes = []
210 |     // 渲染列
211 |     const renderColumn = configs => configs.map((item, index) => {
212 |       const columnConfig = item.columnConfig || {}
213 |       const filterConfig = item.filterConfig || null
214 |       const component = item.component || null
215 |       const curFilter = renderFilters(h, item, privateOn, UNID)
216 |       curFilter && filterVnodes.push(curFilter)
217 | 
218 |       // 如果有自定义 列 标记有作用域槽
219 |       let renderScopedSlots = {}
220 |       if (component) {
221 |         renderScopedSlots = {
222 |           default: ({row, column}) => {
223 |             return h('div',
224 |               {},
225 |               [
226 |                 component
227 |                 ? h(component, {
228 |                   props: {
229 |                     row,
230 |                     column
231 |                   }
232 |                 })
233 |                 : row[columnConfig.prop]
234 |               ]
235 |             )
236 |           }
237 |         }
238 |       }
239 |       return h('el-table-column',
240 |         {
241 |           props:columnConfig,
242 |           scopedSlots: renderScopedSlots,
243 |           key: `__dg_column_${index}__`
244 |         },
245 |         [ filterConfig ? h('template',
246 |             {slot: 'header'},
247 |             [
248 |               h(DgTableHeader, {
249 |                 props: {
250 |                   id: createFilterId(
251 |                     UNID,
252 |                     filterConfig && filterConfig.type || 'null',
253 |                     columnConfig.prop
254 |                   ),
255 |                   label: columnConfig.label,
256 |                   config: filterConfig || null,
257 |                   cb: headClick,
258 |                   UNID: UNID
259 |                 }
260 |               })
261 |             ]
262 |           ) : null,
263 |         ])
264 |     })
265 |     // return h('div', ['dd'])
266 |     return h('div', {
267 |       attrs: {
268 |         id: `__${UNID}_DGTABLE__`
269 |       }
270 |     }, [
271 |       h(
272 |         ElTable,
273 |         {
274 |           props: props,
275 |           on,
276 |           scopedSlots
277 |         },
278 |         renderColumn(configs)
279 |       ),
280 |       h('div', {
281 |         'class': 'dg-filters_hidden-wrap',
282 |         directives: [
283 |           {
284 |             name: 'dg_table_clickoutside',
285 |             expression: (e) => {
286 |               hideAllFilter(e, UNID)
287 |             }
288 |           }
289 |         ]
290 |       }, filterVnodes)
291 |     ])
292 |   }
293 | }
294 | 
295 | 
296 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | import DGTable from './dg-table'
 2 | 
 3 | DGTable.install = (Vue) => {
 4 |   Vue.directive('dg_table_clickoutside', {
 5 |     bind: function (el, binding) {
 6 |       function documentHandler (e) {
 7 |         // console.log(e)
 8 |         if (el.contains(e.target)) {
 9 |           return false
10 |         }
11 |         if (binding.expression && typeof binding.expression === 'function') {
12 |           binding.expression(e)
13 |         }
14 |       }
15 |       el.__vueClickOutside__ = documentHandler
16 |       document.addEventListener('mousedown', documentHandler)
17 |     },
18 |     unbind: function (el) {
19 |       document.removeEventListener('mousedown', el.__vueClickOutside__)
20 |       delete el.__vueClickOutside__
21 |     }
22 |   })
23 |   Vue.component(
24 |     DGTable.name,
25 |     DGTable
26 |   )
27 | }
28 | export default DGTable


--------------------------------------------------------------------------------
/lib/js/Bus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | const Bus = new Vue()
4 | 
5 | export default Bus


--------------------------------------------------------------------------------
/lib/js/hoc.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 高阶组件函数对elmentui原本的组件进行二次包装
 3 |  * 来实现eui原本组件的属性和事件的支持
 4 |  */
 5 | import Vue from 'vue'
 6 | 
 7 | const wrapElementUiComponents = (wrapedComponent) => {
 8 |   const extendComponent = Vue.extend(wrapedComponent)
 9 |   return {
10 |     props: extendComponent.props || {},
11 |     render: function (h) {
12 |       const slots = Object.keys(this.$slots)
13 |         .reduce((arr, key) => arr.concat(this.$slots[key]), [])
14 |         .map(vnode => {
15 |           vnode.context = this._self
16 |           return vnode
17 |         })
18 |       return h(extendComponent, {
19 |         props: this.$props
20 |       }, [slots])
21 |     }
22 |   }
23 | }
24 | 
25 | export default wrapElementUiComponents
26 | 


--------------------------------------------------------------------------------
/lib/js/utils.js:
--------------------------------------------------------------------------------
 1 | export const Dom = {
 2 |   _selectType: {
 3 |     '.': 'class',
 4 |     '#': 'id'
 5 |   },
 6 |   parent: (node) => {
 7 |     return document.querySelector(node).parentNode
 8 |   },
 9 |   parents: (node, parentName) => {
10 |     let pNode = typeof node === 'string' ? Dom.parent(node) : node.parentNode
11 |     let type = parentName.substring(0, 1)
12 |     let typeName = parentName.substring(1)
13 | 
14 |     if (pNode.nodeType !== 1) return null
15 |     const curTypeName = pNode.nodeType === 1 ? pNode.getAttribute(Dom._selectType[type]) : ''
16 |     const typeNames = curTypeName && curTypeName.split(" ") || []
17 |     if (typeNames.includes(typeName)) {
18 |       return pNode
19 |     } else {
20 |       if (pNode) {
21 |         pNode = Dom.parents(pNode, parentName)
22 |       } else {
23 |         pNode = null
24 |       }
25 |     }
26 |     return pNode
27 |   } 
28 | }
29 | 
30 | export const randomString = function (len) {
31 |   len = len || 32
32 |   var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
33 |   var maxPos = $chars.length
34 |   var pwd = ''
35 |   for (let i = 0; i < len; i++) {
36 |     pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
37 |   }
38 |   return pwd
39 | }
40 | 
41 | export const uuid = () => {
42 |   var s = [];
43 |   var hexDigits = "0123456789abcdef";
44 |   for (var i = 0; i < 36; i++) {
45 |       s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
46 |   }
47 |   s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
48 |   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
49 |   s[8] = s[13] = s[18] = s[23] = "-";
50 | 
51 |   var uuid = s.join("");
52 |   return uuid;
53 | }


--------------------------------------------------------------------------------
/lib/packages/cascader/index.js:
--------------------------------------------------------------------------------
1 | import DgCascader from './src/cascader'
2 | 
3 | DgCascader.install = function install (Vue) {
4 |   Vue.component(DgCascader.name, DgCascader)
5 | }
6 | 
7 | export default DgCascader


--------------------------------------------------------------------------------
/lib/packages/cascader/src/cascader.js:
--------------------------------------------------------------------------------
 1 | import Bus from '../../../js/Bus.js'
 2 | 
 3 | export default {
 4 |   name: 'DgCascader',
 5 |   props: ['config'],
 6 |   functional: false,
 7 |   methods: {
 8 |     handleChange (value) {
 9 |       const { key } = this.config || {}
10 |       const { options } = this.$attrs
11 |       let label = this.getLabel(value, options)
12 |       setTimeout(() => {
13 |         this.$parent.$emit('__DGTABLE_GET_FILTER_DATA__', {
14 |           key,
15 |           res: {
16 |             value: value[value.length - 1],
17 |             label
18 |           },
19 |           type: 'cascader'
20 |         })
21 |       }, 0)
22 |     },
23 |     getLabel (value, d) {
24 |       if (!d) return
25 |       let _value = JSON.parse(JSON.stringify(value))
26 |       let labelstr = ''
27 |       let val = value[0]
28 |       const { props } = this.$attrs
29 |       
30 |       for (let i = 0; i < d.length; i++) {
31 |         if (d[i][props.value] === val) {
32 |           if (d[i] && d[i][props.children]) {
33 |             _value.splice(0, 1)
34 |             labelstr += this.getLabel(_value, d[i][props.children])
35 |             return d[i][props.label] + labelstr
36 |           } else {
37 |             return d[i][props.label]
38 |           }
39 |         }
40 |       }
41 |     }
42 |   },
43 |   mounted () {
44 |     const { refname = '' } = this.config || {}
45 |     Bus.$on('__OPEN_DGTABLE_CASCADER_FILTER__', fid => {
46 |       if (refname === fid && this.$refs[fid]) {
47 |         this.$refs[fid].handleInput()
48 |       }
49 |     })
50 |   },
51 |   render: function (h) {
52 |     const { config, $attrs, $listeners } = this
53 |     const props = JSON.parse(JSON.stringify(this.$props))
54 | 
55 |     return h('el-cascader', {
56 |       attrs: JSON.parse(JSON.stringify($attrs)),
57 |       on: Object.assign({}, $listeners, {
58 |         change: this.handleChange
59 |       }),
60 |       props,
61 |       style: 'height:0;padding:0;top:-15px',
62 |       ref: config.refname
63 |     })
64 |   }
65 | }


--------------------------------------------------------------------------------
/lib/packages/date-picker/index.js:
--------------------------------------------------------------------------------
1 | import DgDatePicker from './src/date-picker'
2 | 
3 | DgDatePicker.install = function install (Vue) {
4 |   Vue.component(DgDatePicker.name, DgDatePicker)
5 | }
6 | 
7 | export default DgDatePicker


--------------------------------------------------------------------------------
/lib/packages/date-picker/src/date-picker.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import Bus from '../../../js/Bus.js'
 3 | 
 4 | export default  {
 5 |   name: 'DgDatePicker',
 6 |   props: ['config'],
 7 |   functional: false,
 8 |   mounted () {
 9 |     const { refname = '' } = this.config || {}
10 |     Bus.$on('__OPEN_DGTABLE_DATE_FILTER__', fid => {
11 |       if (this.$refs[fid]) {
12 |         if (refname === fid) this.$refs[fid].focus()
13 |       }
14 |     })
15 |   },
16 |   methods: {
17 |     changeData (val) {
18 |       const { key } = this.config || {}
19 |       this.$parent.$emit('__DGTABLE_GET_FILTER_DATA__', {
20 |         type: 'date',
21 |         key,
22 |         res: {
23 |           value: val
24 |         }
25 |       })
26 |     }
27 |   },
28 |   render: function (h) {
29 |     const { config, $attrs, $listeners } = this
30 |     const props = JSON.parse(JSON.stringify(this.$props))
31 |     // 合并自定义change函数
32 |     const changeHandlers = (val) => {
33 |       this.changeData(val)
34 |       $listeners.change && $listeners.change(val)
35 |     }
36 |     return h('el-date-picker', {
37 |       attrs: $attrs,
38 |       on: Object.assign({}, $listeners, {
39 |         change: changeHandlers,
40 |         input: changeHandlers
41 |       }),
42 |       props,
43 |       style: 'width:0;height:0;padding:0;top:-10px',
44 |       ref: config.refname
45 |     })
46 |   }
47 | }
48 | 
49 | 


--------------------------------------------------------------------------------
/lib/packages/dg-filter-wrap/index.js:
--------------------------------------------------------------------------------
1 | import DgFilterWrap from './src/filter-wrap'
2 | 
3 | DgFilterWrap.install = function install (Vue) {
4 |   Vue.component(DgFilterWrap.name, DgFilterWrap)
5 | }
6 | 
7 | export default DgFilterWrap


--------------------------------------------------------------------------------
/lib/packages/dg-filter-wrap/src/filter-wrap.js:
--------------------------------------------------------------------------------
 1 | const anyType = [String, Number, Boolean, Function, Object, Array, Symbol]
 2 | export default {
 3 |   name: 'DgFilterWrap',
 4 |   props: {
 5 |     filterHandler: Function,
 6 |     value: anyType,
 7 |     label: String
 8 |   },
 9 |   functional: false,
10 |   render (h) {
11 |     console.log(this)
12 | 
13 |     const { $slots } = this
14 | 
15 |     return h('div', $slots.default)
16 |   },
17 |   mounted () {
18 |     this.$on('__CUSTOM_FILTER_DATA__', res => {
19 |       console.log(res)
20 |     })
21 |   }
22 | }


--------------------------------------------------------------------------------
/lib/packages/index.js:
--------------------------------------------------------------------------------
1 | import DgCascader from './cascader'
2 | import DgDatePicker from './date-picker'
3 | import DgFilterWrap from './dg-filter-wrap'
4 | 
5 | export {
6 |   DgCascader,
7 |   DgDatePicker,
8 |   DgFilterWrap
9 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dg-table",
 3 |   "version": "2.0.9",
 4 |   "private": false,
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint",
10 |     "dg-mp": "dg-mp"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^2.6.5",
14 |     "dg-mp": "^1.0.3",
15 |     "element-ui": "^2.11.1",
16 |     "vue": "^2.6.10"
17 |   },
18 |   "keywords": ["Vue","Element"],
19 |   "author": "GeniusChenSG",
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/tccsg/dg-table.git"
23 |   },
24 |   "license": "MIT",
25 |   "devDependencies": {
26 |     "@vue/cli-plugin-babel": "^3.10.0",
27 |     "@vue/cli-plugin-eslint": "^3.10.0",
28 |     "@vue/cli-service": "^3.10.0",
29 |     "babel-eslint": "^10.0.1",
30 |     "eslint": "^5.16.0",
31 |     "eslint-plugin-vue": "^5.0.0",
32 |     "vue-template-compiler": "^2.6.10"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/essential",
41 |       "eslint:recommended"
42 |     ],
43 |     "rules": {
44 |       "no-console": "off"
45 |     },
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     }
49 |   },
50 |   "postcss": {
51 |     "plugins": {
52 |       "autoprefixer": {}
53 |     }
54 |   },
55 |   "browserslist": [
56 |     "> 1%",
57 |     "last 2 versions"
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tccsg/dg-table/a5a2d4f8d948ef4b1e12fc04ba6dce5a9ff12339/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>dg-table-v2</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but dg-table-v2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <dg-table
  4 |       :configs="configs"
  5 |       tableId='account'
  6 |       @filter-change="filterChange"
  7 | 
  8 |       :data="tableData"
  9 |       @row-click='rowClick'
 10 |       @selection-change="handleSelectionChange"
 11 |     ></dg-table>
 12 |     <div>
 13 |       <div>
 14 |         {{selects.length}}
 15 |       </div>
 16 |       <div>
 17 |         <div v-for="(val, key, index) in filters" :key="index">
 18 |           <div><span>{{key}}：</span><span>{{val}}</span></div>
 19 |         </div>
 20 |       </div>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | import Test from './components/HelloWorld'
 27 | import Gender from './components/Gender'
 28 | import MyDatePicker from './components/MyDatePicker'
 29 | import MyCascader from './components/MyCascader'
 30 | import MyInput from './components/myFilter/MyInput'
 31 | import MyInput2 from './components/myFilter/MyInput2'
 32 | // import Test2 from './components/eltable'
 33 | import {
 34 |   createTableDataByRandom
 35 | } from './assets/js/simulationapi.js'
 36 | export default {
 37 |   name: "app",
 38 |   components: {
 39 |   },
 40 |   mounted() {
 41 |     const res = createTableDataByRandom(203)
 42 |     this.tableData = res.data
 43 |   },
 44 |   data() {
 45 |     return {
 46 |       selects: [],
 47 |       filters: {},
 48 |       value1: '',
 49 |       count: 0,
 50 |       tableData: [],
 51 |       search: "",
 52 |       configs: [
 53 |         {
 54 |           columnConfig: {
 55 |             type: 'selection',
 56 |             wdith: '55'
 57 |           }
 58 |         },
 59 |         {
 60 |           columnConfig: {
 61 |             prop: "name",
 62 |             label: "姓名"
 63 |           }
 64 |         },
 65 |         {
 66 |           columnConfig: {
 67 |             prop: "gender",
 68 |             label: "性别",
 69 |             filters: [
 70 |               {text: '男', value: '1'},
 71 |               {text: '女', value: '2'}
 72 |             ],
 73 |             filterMethod: (value, row, column) => {
 74 |               const property = column['property'];
 75 |               return row[property] === value;
 76 |             }
 77 |           },
 78 |           component: Gender,
 79 |         },
 80 |         {
 81 |           columnConfig: {
 82 |             prop: "birthPlace",
 83 |             label: "出生地"
 84 |           },
 85 |           component: Test,
 86 |           filterConfig: {
 87 |             type: 'cascader',
 88 |             component: MyCascader
 89 |           }
 90 |         },
 91 |         {
 92 |           columnConfig: {
 93 |             prop: "birthDay",
 94 |             label: "出生日期",
 95 |             fixed: true
 96 |           },
 97 |           filterConfig: {
 98 |             type: 'date',
 99 |             component: MyDatePicker
100 |           }
101 |         },
102 |          {
103 |           columnConfig: {
104 |             prop: "time",
105 |             label: "时间"
106 |           },
107 |           filterConfig: {
108 |             type: 'date'
109 |           }
110 |         },
111 |         {
112 |           columnConfig: {
113 |             prop: "phone",
114 |             label: "手机号"
115 |           },
116 |           filterConfig: {
117 |             type: 'custom',
118 |             component: MyInput
119 |           }
120 |         },
121 |         {
122 |           columnConfig: {
123 |             prop: "age",
124 |             label: "年龄"
125 |           },
126 |           filterConfig: {
127 |             type: 'custom',
128 |             component: MyInput2
129 |           }
130 |         }
131 |       ]
132 |     };
133 |   },
134 |   methods: {
135 |     rowClick (row, column) {
136 |       console.log(row, column)
137 |     },
138 |     filterChange (d) {
139 |       this.$set(this.filters, d.key, d.res.value)
140 |       console.log(d)
141 |     },
142 |     handleSelectionChange(val) {
143 |       this.selects = val
144 |     }
145 |   }
146 | };
147 | </script>
148 | 
149 | <style>
150 | body{
151 |   padding-top: 1px;
152 | }
153 | #app {
154 |   margin-top: 80px;
155 | }
156 | .el-table .warning-row {
157 |   background: oldlace;
158 | }
159 | 
160 | .el-table .success-row {
161 |   background: #f0f9eb;
162 | }
163 | </style>
164 | 


--------------------------------------------------------------------------------
/src/assets/js/simulationapi.js:
--------------------------------------------------------------------------------
  1 | // 用于模拟搜索的数据
  2 | let allusers = [] // 全部数据
  3 | let CUR_FILTERDATA = [] // 过滤后的数据
  4 | 
  5 | let perpagecount = 10 // 每页显示的数量
  6 | // let CUR_PAGE = 1
  7 | 
  8 | export const searchdata = (k = {}) => {
  9 |   let data = []
 10 |   for (let i = 0; i < allusers.length; i++) {
 11 |     if (allusers[i].name.indexOf(k.name) !== -1) {
 12 |       data.push(allusers[i])
 13 |     }
 14 |   }
 15 |   return Promise.resolve(data)
 16 | }
 17 | export const dofilter = (allfilter = {}) => {
 18 |   let data = []
 19 |   let filter = allfilter.filters
 20 |   let page = allfilter.page
 21 |   for (let i = 0; i < allusers.length; i++) {
 22 |     let sameKeyNum = 0
 23 |     for (let k in filter) {
 24 |       if (k === 'birthPlace') {
 25 |         if (allusers[i][k].child.code === filter[k] + '') sameKeyNum++
 26 |       }
 27 |       if (k === 'birthDay') {
 28 |         var gt = new Date(filter[k]['gt']).getTime()
 29 |         var lt = new Date(filter[k]['lt']).getTime()
 30 |         var usertime = new Date(allusers[i][k]).getTime()
 31 |         if (usertime <= lt && usertime >= gt) {
 32 |           sameKeyNum++
 33 |         }
 34 |       }
 35 |       if (k === 'age') {
 36 |         let agea = filter[k].split(',')
 37 |         if (allusers[i][k] <= agea[1] && allusers[i][k] >= agea[0]) {
 38 |           sameKeyNum++
 39 |         }
 40 |       }
 41 |       if (allusers[i][k] === filter[k] + '') {
 42 |         sameKeyNum++
 43 |       }
 44 |     }
 45 |     if (sameKeyNum === Object.keys(filter).length) data.push(allusers[i])
 46 |   }
 47 |   if (Object.keys(filter).length === 0) data = allusers
 48 |   CUR_FILTERDATA = data
 49 |   let rdata = CUR_FILTERDATA.slice(perpagecount * (page - 1), perpagecount * (page - 1) + perpagecount)
 50 |   let _page = Math.ceil(data.length / perpagecount) ? Math.ceil(data.length / perpagecount) : 1
 51 |   let res = {
 52 |     data: rdata,
 53 |     pagenum: _page
 54 |   }
 55 |   return res
 56 | }
 57 | // 模拟radio
 58 | export const radiodata = () => {
 59 |   let data = [
 60 |     { label: '项目1', value: 1 },
 61 |     { label: '项目2', value: 2 },
 62 |     { label: '项目3', value: 3 },
 63 |     { label: '项目4', value: 4 },
 64 |     { label: '项目5', value: 5 }
 65 |   ]
 66 |   return Promise.resolve(data)
 67 | }
 68 | // 随机生成表数据
 69 | export const createTableDataByRandom = (len) => {
 70 |   let users = []
 71 |   const xarr = ['王', '黄', '陈', '方', '林', '刘', '张', '吴', '蔡', '龚', '杨', '潘', '俞', '庄', '许', '徐', '欧阳', '欧', '诸葛', '肖', '涂', '严', '颜', '冯', '曾']
 72 |   const nchar = ['容止', '羡林', '芷', '回', '言蹊', '思睿', '怀瑾', '瑾', '遇', '道韫', '弦', '柳', '酒', '梦', '桑', '遥', '雨夕', '风遥', '雁白', '青沐', '合', '逸思', '霏', '清疏', '秋荻', '廷轩', '轩', '宇', '絮影', '清淮', '柳依', '寒箫', '箫', '惜夏', '意轩', '旖旎', '慕青', '宣', '晓', '沛', '斯年', '莲舟', '依凝', '井与', '予锦', '艳', '淑芬', '思哲', '湛', '梦文', '承嗣', '博艺', '玲杰', '德馨', '琪维', '俊', '钰', '蔚', '彬郁', '诗嘉', '津媛', '艺歆', '奕然', '雯梦', '思佳']
 73 |   const phead = ['134', '135', '137', '138', '155', '130', '186', '133', '153', '180', '150', '151', '188']
 74 |   const numstr = '0123456789'
 75 |   const gchar = ['1', '2']
 76 |   const csign = ['+', '-']
 77 |   const bcity = cities()
 78 |   let byear = 1996
 79 |   for (let i = 0; i < len; i++) {
 80 |     let curuser = {}
 81 |     let cursing = csign[Math.floor(Math.random() * csign.length)]
 82 | 
 83 |     let curx = xarr[Math.floor(Math.random() * xarr.length)]
 84 |     let curn = nchar[Math.floor(Math.random() * nchar.length)]
 85 |     let cury = 1996
 86 |     let curm = Math.floor(Math.random() * 11) + 1
 87 |     let curd = Math.floor(Math.random() * 29) + 1
 88 |     let gender = gchar[Math.floor(Math.random() * gchar.length)]
 89 |     if (cursing === '+') cury = byear + Math.floor(Math.random() * 10)
 90 |     if (cursing === '-') cury = byear - Math.floor(Math.random() * 10)
 91 |     let age = 2018 - cury
 92 |     // 获取手机号
 93 |     let phone = phead[Math.floor(Math.random() * phead.length)]
 94 |     for (let j = 0; j < 8; j++) {
 95 |       phone += numstr.charAt(Math.floor(Math.random() * numstr.length))
 96 |     }
 97 |     let province = bcity[Math.floor(Math.random() * bcity.length)]
 98 |     let city = province.children[Math.floor(Math.random() * province.children.length)]
 99 |     let birthPlace = JSON.parse(JSON.stringify(province))
100 |     birthPlace.child = city
101 |     delete birthPlace.children
102 |     curuser = {
103 |       gender,
104 |       age,
105 |       phone,
106 |       birthPlace,
107 |       name: curx + curn,
108 |       uid: randomString(16),
109 |       birthDay: cury + '.' + curm + '.' + curd
110 |     }
111 |     users.push(curuser)
112 |   }
113 |   allusers = JSON.parse(JSON.stringify(users))
114 |   let _page = Math.ceil(users.length / perpagecount) ? Math.ceil(users.length / perpagecount) : 1
115 |   let rdata = users.slice(0, perpagecount)
116 |   let res = {
117 |     data: rdata,
118 |     pagenum: _page
119 |   }
120 |   return res
121 | }
122 | // 获取uid
123 | const randomString = function (len) {
124 |   len = len || 32
125 |   var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
126 |   var maxPos = $chars.length
127 |   var pwd = ''
128 |   for (let i = 0; i < len; i++) {
129 |     pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
130 |   }
131 |   return 'uid_' + pwd
132 | }
133 | // 表数据
134 | export const tabledata = () => {
135 |   let data = []
136 |   return Promise.resolve(data)
137 | }
138 | 
139 | // 获取城市
140 | export const cities = () => {
141 |   let data = [{ 'code': '11', 'name': '北京市', 'children': [{ 'code': '1101', 'name': '北京市辖区' }] }, { 'code': '12', 'name': '天津市', 'children': [{ 'code': '1201', 'name': '天津市辖区' }] }, { 'code': '13', 'name': '河北省', 'children': [{ 'code': '1301', 'name': '石家庄市' }, { 'code': '1302', 'name': '唐山市' }, { 'code': '1303', 'name': '秦皇岛市' }, { 'code': '1304', 'name': '邯郸市' }, { 'code': '1305', 'name': '邢台市' }, { 'code': '1306', 'name': '保定市' }, { 'code': '1307', 'name': '张家口市' }, { 'code': '1308', 'name': '承德市' }, { 'code': '1309', 'name': '沧州市' }, { 'code': '1310', 'name': '廊坊市' }, { 'code': '1311', 'name': '衡水市' }] }, { 'code': '14', 'name': '山西省', 'children': [{ 'code': '1401', 'name': '太原市' }, { 'code': '1402', 'name': '大同市' }, { 'code': '1403', 'name': '阳泉市' }, { 'code': '1404', 'name': '长治市' }, { 'code': '1405', 'name': '晋城市' }, { 'code': '1406', 'name': '朔州市' }, { 'code': '1407', 'name': '晋中市' }, { 'code': '1408', 'name': '运城市' }, { 'code': '1409', 'name': '忻州市' }, { 'code': '1410', 'name': '临汾市' }, { 'code': '1411', 'name': '吕梁市' }] }, { 'code': '15', 'name': '内蒙古自治区', 'children': [{ 'code': '1501', 'name': '呼和浩特市' }, { 'code': '1502', 'name': '包头市' }, { 'code': '1503', 'name': '乌海市' }, { 'code': '1504', 'name': '赤峰市' }, { 'code': '1505', 'name': '通辽市' }, { 'code': '1506', 'name': '鄂尔多斯市' }, { 'code': '1507', 'name': '呼伦贝尔市' }, { 'code': '1508', 'name': '巴彦淖尔市' }, { 'code': '1509', 'name': '乌兰察布市' }, { 'code': '1522', 'name': '兴安盟' }, { 'code': '1525', 'name': '锡林郭勒盟' }, { 'code': '1529', 'name': '阿拉善盟' }] }, { 'code': '21', 'name': '辽宁省', 'children': [{ 'code': '2101', 'name': '沈阳市' }, { 'code': '2102', 'name': '大连市' }, { 'code': '2103', 'name': '鞍山市' }, { 'code': '2104', 'name': '抚顺市' }, { 'code': '2105', 'name': '本溪市' }, { 'code': '2106', 'name': '丹东市' }, { 'code': '2107', 'name': '锦州市' }, { 'code': '2108', 'name': '营口市' }, { 'code': '2109', 'name': '阜新市' }, { 'code': '2110', 'name': '辽阳市' }, { 'code': '2111', 'name': '盘锦市' }, { 'code': '2112', 'name': '铁岭市' }, { 'code': '2113', 'name': '朝阳市' }, { 'code': '2114', 'name': '葫芦岛市' }] }, { 'code': '22', 'name': '吉林省', 'children': [{ 'code': '2201', 'name': '长春市' }, { 'code': '2202', 'name': '吉林市' }, { 'code': '2203', 'name': '四平市' }, { 'code': '2204', 'name': '辽源市' }, { 'code': '2205', 'name': '通化市' }, { 'code': '2206', 'name': '白山市' }, { 'code': '2207', 'name': '松原市' }, { 'code': '2208', 'name': '白城市' }, { 'code': '2224', 'name': '延边朝鲜族自治州' }] }, { 'code': '23', 'name': '黑龙江省', 'children': [{ 'code': '2301', 'name': '哈尔滨市' }, { 'code': '2302', 'name': '齐齐哈尔市' }, { 'code': '2303', 'name': '鸡西市' }, { 'code': '2304', 'name': '鹤岗市' }, { 'code': '2305', 'name': '双鸭山市' }, { 'code': '2306', 'name': '大庆市' }, { 'code': '2307', 'name': '伊春市' }, { 'code': '2308', 'name': '佳木斯市' }, { 'code': '2309', 'name': '七台河市' }, { 'code': '2310', 'name': '牡丹江市' }, { 'code': '2311', 'name': '黑河市' }, { 'code': '2312', 'name': '绥化市' }, { 'code': '2327', 'name': '大兴安岭地区' }] }, { 'code': '31', 'name': '上海市', 'children': [{ 'code': '3101', 'name': '上海市辖区' }] }, { 'code': '32', 'name': '江苏省', 'children': [{ 'code': '3201', 'name': '南京市' }, { 'code': '3202', 'name': '无锡市' }, { 'code': '3203', 'name': '徐州市' }, { 'code': '3204', 'name': '常州市' }, { 'code': '3205', 'name': '苏州市' }, { 'code': '3206', 'name': '南通市' }, { 'code': '3207', 'name': '连云港市' }, { 'code': '3208', 'name': '淮安市' }, { 'code': '3209', 'name': '盐城市' }, { 'code': '3210', 'name': '扬州市' }, { 'code': '3211', 'name': '镇江市' }, { 'code': '3212', 'name': '泰州市' }, { 'code': '3213', 'name': '宿迁市' }] }, { 'code': '33', 'name': '浙江省', 'children': [{ 'code': '3301', 'name': '杭州市' }, { 'code': '3302', 'name': '宁波市' }, { 'code': '3303', 'name': '温州市' }, { 'code': '3304', 'name': '嘉兴市' }, { 'code': '3305', 'name': '湖州市' }, { 'code': '3306', 'name': '绍兴市' }, { 'code': '3307', 'name': '金华市' }, { 'code': '3308', 'name': '衢州市' }, { 'code': '3309', 'name': '舟山市' }, { 'code': '3310', 'name': '台州市' }, { 'code': '3311', 'name': '丽水市' }] }, { 'code': '34', 'name': '安徽省', 'children': [{ 'code': '3401', 'name': '合肥市' }, { 'code': '3402', 'name': '芜湖市' }, { 'code': '3403', 'name': '蚌埠市' }, { 'code': '3404', 'name': '淮南市' }, { 'code': '3405', 'name': '马鞍山市' }, { 'code': '3406', 'name': '淮北市' }, { 'code': '3407', 'name': '铜陵市' }, { 'code': '3408', 'name': '安庆市' }, { 'code': '3410', 'name': '黄山市' }, { 'code': '3411', 'name': '滁州市' }, { 'code': '3412', 'name': '阜阳市' }, { 'code': '3413', 'name': '宿州市' }, { 'code': '3415', 'name': '六安市' }, { 'code': '3416', 'name': '亳州市' }, { 'code': '3417', 'name': '池州市' }, { 'code': '3418', 'name': '宣城市' }] }, { 'code': '35', 'name': '福建省', 'children': [{ 'code': '3501', 'name': '福州市' }, { 'code': '3502', 'name': '厦门市' }, { 'code': '3503', 'name': '莆田市' }, { 'code': '3504', 'name': '三明市' }, { 'code': '3505', 'name': '泉州市' }, { 'code': '3506', 'name': '漳州市' }, { 'code': '3507', 'name': '南平市' }, { 'code': '3508', 'name': '龙岩市' }, { 'code': '3509', 'name': '宁德市' }] }, { 'code': '36', 'name': '江西省', 'children': [{ 'code': '3601', 'name': '南昌市' }, { 'code': '3602', 'name': '景德镇市' }, { 'code': '3603', 'name': '萍乡市' }, { 'code': '3604', 'name': '九江市' }, { 'code': '3605', 'name': '新余市' }, { 'code': '3606', 'name': '鹰潭市' }, { 'code': '3607', 'name': '赣州市' }, { 'code': '3608', 'name': '吉安市' }, { 'code': '3609', 'name': '宜春市' }, { 'code': '3610', 'name': '抚州市' }, { 'code': '3611', 'name': '上饶市' }] }, { 'code': '37', 'name': '山东省', 'children': [{ 'code': '3701', 'name': '济南市' }, { 'code': '3702', 'name': '青岛市' }, { 'code': '3703', 'name': '淄博市' }, { 'code': '3704', 'name': '枣庄市' }, { 'code': '3705', 'name': '东营市' }, { 'code': '3706', 'name': '烟台市' }, { 'code': '3707', 'name': '潍坊市' }, { 'code': '3708', 'name': '济宁市' }, { 'code': '3709', 'name': '泰安市' }, { 'code': '3710', 'name': '威海市' }, { 'code': '3711', 'name': '日照市' }, { 'code': '3712', 'name': '莱芜市' }, { 'code': '3713', 'name': '临沂市' }, { 'code': '3714', 'name': '德州市' }, { 'code': '3715', 'name': '聊城市' }, { 'code': '3716', 'name': '滨州市' }, { 'code': '3717', 'name': '菏泽市' }] }, { 'code': '41', 'name': '河南省', 'children': [{ 'code': '4101', 'name': '郑州市' }, { 'code': '4102', 'name': '开封市' }, { 'code': '4103', 'name': '洛阳市' }, { 'code': '4104', 'name': '平顶山市' }, { 'code': '4105', 'name': '安阳市' }, { 'code': '4106', 'name': '鹤壁市' }, { 'code': '4107', 'name': '新乡市' }, { 'code': '4108', 'name': '焦作市' }, { 'code': '4109', 'name': '濮阳市' }, { 'code': '4110', 'name': '许昌市' }, { 'code': '4111', 'name': '漯河市' }, { 'code': '4112', 'name': '三门峡市' }, { 'code': '4113', 'name': '南阳市' }, { 'code': '4114', 'name': '商丘市' }, { 'code': '4115', 'name': '信阳市' }, { 'code': '4116', 'name': '周口市' }, { 'code': '4117', 'name': '驻马店市' }, { 'code': '4190', 'name': '省直辖县级行政区划' }] }, { 'code': '42', 'name': '湖北省', 'children': [{ 'code': '4201', 'name': '武汉市' }, { 'code': '4202', 'name': '黄石市' }, { 'code': '4203', 'name': '十堰市' }, { 'code': '4205', 'name': '宜昌市' }, { 'code': '4206', 'name': '襄阳市' }, { 'code': '4207', 'name': '鄂州市' }, { 'code': '4208', 'name': '荆门市' }, { 'code': '4209', 'name': '孝感市' }, { 'code': '4210', 'name': '荆州市' }, { 'code': '4211', 'name': '黄冈市' }, { 'code': '4212', 'name': '咸宁市' }, { 'code': '4213', 'name': '随州市' }, { 'code': '4228', 'name': '恩施土家族苗族自治州' }, { 'code': '4290', 'name': '省直辖县级行政区划' }] }, { 'code': '43', 'name': '湖南省', 'children': [{ 'code': '4301', 'name': '长沙市' }, { 'code': '4302', 'name': '株洲市' }, { 'code': '4303', 'name': '湘潭市' }, { 'code': '4304', 'name': '衡阳市' }, { 'code': '4305', 'name': '邵阳市' }, { 'code': '4306', 'name': '岳阳市' }, { 'code': '4307', 'name': '常德市' }, { 'code': '4308', 'name': '张家界市' }, { 'code': '4309', 'name': '益阳市' }, { 'code': '4310', 'name': '郴州市' }, { 'code': '4311', 'name': '永州市' }, { 'code': '4312', 'name': '怀化市' }, { 'code': '4313', 'name': '娄底市' }, { 'code': '4331', 'name': '湘西土家族苗族自治州' }] }, { 'code': '44', 'name': '广东省', 'children': [{ 'code': '4401', 'name': '广州市' }, { 'code': '4402', 'name': '韶关市' }, { 'code': '4403', 'name': '深圳市' }, { 'code': '4404', 'name': '珠海市' }, { 'code': '4405', 'name': '汕头市' }, { 'code': '4406', 'name': '佛山市' }, { 'code': '4407', 'name': '江门市' }, { 'code': '4408', 'name': '湛江市' }, { 'code': '4409', 'name': '茂名市' }, { 'code': '4412', 'name': '肇庆市' }, { 'code': '4413', 'name': '惠州市' }, { 'code': '4414', 'name': '梅州市' }, { 'code': '4415', 'name': '汕尾市' }, { 'code': '4416', 'name': '河源市' }, { 'code': '4417', 'name': '阳江市' }, { 'code': '4418', 'name': '清远市' }, { 'code': '4419', 'name': '东莞市' }, { 'code': '4420', 'name': '中山市' }, { 'code': '4451', 'name': '潮州市' }, { 'code': '4452', 'name': '揭阳市' }, { 'code': '4453', 'name': '云浮市' }] }, { 'code': '45', 'name': '广西壮族自治区', 'children': [{ 'code': '4501', 'name': '南宁市' }, { 'code': '4502', 'name': '柳州市' }, { 'code': '4503', 'name': '桂林市' }, { 'code': '4504', 'name': '梧州市' }, { 'code': '4505', 'name': '北海市' }, { 'code': '4506', 'name': '防城港市' }, { 'code': '4507', 'name': '钦州市' }, { 'code': '4508', 'name': '贵港市' }, { 'code': '4509', 'name': '玉林市' }, { 'code': '4510', 'name': '百色市' }, { 'code': '4511', 'name': '贺州市' }, { 'code': '4512', 'name': '河池市' }, { 'code': '4513', 'name': '来宾市' }, { 'code': '4514', 'name': '崇左市' }] }, { 'code': '46', 'name': '海南省', 'children': [{ 'code': '4601', 'name': '海口市' }, { 'code': '4602', 'name': '三亚市' }, { 'code': '4603', 'name': '三沙市' }, { 'code': '4604', 'name': '儋州市' }, { 'code': '4690', 'name': '省直辖县级行政区划' }] }, { 'code': '50', 'name': '重庆市', 'children': [{ 'code': '5001', 'name': '重庆市辖区' }, { 'code': '5002', 'name': '县' }] }, { 'code': '51', 'name': '四川省', 'children': [{ 'code': '5101', 'name': '成都市' }, { 'code': '5103', 'name': '自贡市' }, { 'code': '5104', 'name': '攀枝花市' }, { 'code': '5105', 'name': '泸州市' }, { 'code': '5106', 'name': '德阳市' }, { 'code': '5107', 'name': '绵阳市' }, { 'code': '5108', 'name': '广元市' }, { 'code': '5109', 'name': '遂宁市' }, { 'code': '5110', 'name': '内江市' }, { 'code': '5111', 'name': '乐山市' }, { 'code': '5113', 'name': '南充市' }, { 'code': '5114', 'name': '眉山市' }, { 'code': '5115', 'name': '宜宾市' }, { 'code': '5116', 'name': '广安市' }, { 'code': '5117', 'name': '达州市' }, { 'code': '5118', 'name': '雅安市' }, { 'code': '5119', 'name': '巴中市' }, { 'code': '5120', 'name': '资阳市' }, { 'code': '5132', 'name': '阿坝藏族羌族自治州' }, { 'code': '5133', 'name': '甘孜藏族自治州' }, { 'code': '5134', 'name': '凉山彝族自治州' }] }, { 'code': '52', 'name': '贵州省', 'children': [{ 'code': '5201', 'name': '贵阳市' }, { 'code': '5202', 'name': '六盘水市' }, { 'code': '5203', 'name': '遵义市' }, { 'code': '5204', 'name': '安顺市' }, { 'code': '5205', 'name': '毕节市' }, { 'code': '5206', 'name': '铜仁市' }, { 'code': '5223', 'name': '黔西南布依族苗族自治州' }, { 'code': '5226', 'name': '黔东南苗族侗族自治州' }, { 'code': '5227', 'name': '黔南布依族苗族自治州' }] }, { 'code': '53', 'name': '云南省', 'children': [{ 'code': '5301', 'name': '昆明市' }, { 'code': '5303', 'name': '曲靖市' }, { 'code': '5304', 'name': '玉溪市' }, { 'code': '5305', 'name': '保山市' }, { 'code': '5306', 'name': '昭通市' }, { 'code': '5307', 'name': '丽江市' }, { 'code': '5308', 'name': '普洱市' }, { 'code': '5309', 'name': '临沧市' }, { 'code': '5323', 'name': '楚雄彝族自治州' }, { 'code': '5325', 'name': '红河哈尼族彝族自治州' }, { 'code': '5326', 'name': '文山壮族苗族自治州' }, { 'code': '5328', 'name': '西双版纳傣族自治州' }, { 'code': '5329', 'name': '大理白族自治州' }, { 'code': '5331', 'name': '德宏傣族景颇族自治州' }, { 'code': '5333', 'name': '怒江傈僳族自治州' }, { 'code': '5334', 'name': '迪庆藏族自治州' }] }, { 'code': '54', 'name': '西藏自治区', 'children': [{ 'code': '5401', 'name': '拉萨市' }, { 'code': '5402', 'name': '日喀则市' }, { 'code': '5403', 'name': '昌都市' }, { 'code': '5404', 'name': '林芝市' }, { 'code': '5405', 'name': '山南市' }, { 'code': '5424', 'name': '那曲地区' }, { 'code': '5425', 'name': '阿里地区' }] }, { 'code': '61', 'name': '陕西省', 'children': [{ 'code': '6101', 'name': '西安市' }, { 'code': '6102', 'name': '铜川市' }, { 'code': '6103', 'name': '宝鸡市' }, { 'code': '6104', 'name': '咸阳市' }, { 'code': '6105', 'name': '渭南市' }, { 'code': '6106', 'name': '延安市' }, { 'code': '6107', 'name': '汉中市' }, { 'code': '6108', 'name': '榆林市' }, { 'code': '6109', 'name': '安康市' }, { 'code': '6110', 'name': '商洛市' }] }, { 'code': '62', 'name': '甘肃省', 'children': [{ 'code': '6201', 'name': '兰州市' }, { 'code': '6202', 'name': '嘉峪关市' }, { 'code': '6203', 'name': '金昌市' }, { 'code': '6204', 'name': '白银市' }, { 'code': '6205', 'name': '天水市' }, { 'code': '6206', 'name': '武威市' }, { 'code': '6207', 'name': '张掖市' }, { 'code': '6208', 'name': '平凉市' }, { 'code': '6209', 'name': '酒泉市' }, { 'code': '6210', 'name': '庆阳市' }, { 'code': '6211', 'name': '定西市' }, { 'code': '6212', 'name': '陇南市' }, { 'code': '6229', 'name': '临夏回族自治州' }, { 'code': '6230', 'name': '甘南藏族自治州' }] }, { 'code': '63', 'name': '青海省', 'children': [{ 'code': '6301', 'name': '西宁市' }, { 'code': '6302', 'name': '海东市' }, { 'code': '6322', 'name': '海北藏族自治州' }, { 'code': '6323', 'name': '黄南藏族自治州' }, { 'code': '6325', 'name': '海南藏族自治州' }, { 'code': '6326', 'name': '果洛藏族自治州' }, { 'code': '6327', 'name': '玉树藏族自治州' }, { 'code': '6328', 'name': '海西蒙古族藏族自治州' }] }, { 'code': '64', 'name': '宁夏回族自治区', 'children': [{ 'code': '6401', 'name': '银川市' }, { 'code': '6402', 'name': '石嘴山市' }, { 'code': '6403', 'name': '吴忠市' }, { 'code': '6404', 'name': '固原市' }, { 'code': '6405', 'name': '中卫市' }] }, { 'code': '65', 'name': '新疆维吾尔自治区', 'children': [{ 'code': '6501', 'name': '乌鲁木齐市' }, { 'code': '6502', 'name': '克拉玛依市' }, { 'code': '6504', 'name': '吐鲁番市' }, { 'code': '6505', 'name': '哈密市' }, { 'code': '6523', 'name': '昌吉回族自治州' }, { 'code': '6527', 'name': '博尔塔拉蒙古自治州' }, { 'code': '6528', 'name': '巴音郭楞蒙古自治州' }, { 'code': '6529', 'name': '阿克苏地区' }, { 'code': '6530', 'name': '克孜勒苏柯尔克孜自治州' }, { 'code': '6531', 'name': '喀什地区' }, { 'code': '6532', 'name': '和田地区' }, { 'code': '6540', 'name': '伊犁哈萨克自治州' }, { 'code': '6542', 'name': '塔城地区' }, { 'code': '6543', 'name': '阿勒泰地区' }, { 'code': '6590', 'name': '自治区直辖县级行政区划' }] }, { 'name': '台湾', 'code': '710000', 'children': [{ 'name': '台北市', 'code': '710100' }, { 'name': '高雄市', 'code': '710200' }, { 'name': '基隆市', 'code': '710300' }, { 'name': '台中市', 'code': '710400' }, { 'name': '台南市', 'code': '710500' }, { 'name': '新竹市', 'code': '710600' }, { 'name': '嘉义市', 'code': '710700' }, { 'name': '新北市', 'code': '710800' }, { 'name': '宜兰县', 'code': '712200' }, { 'name': '桃园县', 'code': '712300' }, { 'name': '新竹县', 'code': '712400' }, { 'name': '苗栗县', 'code': '712500' }, { 'name': '彰化县', 'code': '712700' }, { 'name': '南投县', 'code': '712800' }, { 'name': '云林县', 'code': '712900' }, { 'name': '嘉义县', 'code': '713000' }, { 'name': '屏东县', 'code': '713300' }, { 'name': '台东县', 'code': '713400' }, { 'name': '花莲县', 'code': '713500' }, { 'name': '澎湖县', 'code': '713600' }] }, { 'name': '香港特别行政区', 'code': '810000', 'children': [{ 'name': '香港岛', 'code': '810100' }, { 'name': '九龙', 'code': '810200' }, { 'name': '新界', 'code': '810300' }] }, { 'name': '澳门特别行政区', 'code': '820000', 'children': [{ 'name': '澳门半岛', 'code': '820100' }, { 'name': '氹仔岛', 'code': '820200' }, { 'name': '路环岛', 'code': '820300' }] }]
142 |   return data
143 | }
144 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tccsg/dg-table/a5a2d4f8d948ef4b1e12fc04ba6dce5a9ff12339/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Gender.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <span
 4 |       v-if="row.gender === '1'"
 5 |       class="male">
 6 |       {{gender[row['gender']]}}
 7 |     </span>
 8 |     <span
 9 |       v-if="row.gender === '2'"
10 |       class="female">
11 |       {{gender[row['gender']]}}
12 |     </span>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   props:['row', 'column'],
19 |   data() {
20 |     return {
21 |       gender: Object.freeze({
22 |         1: '男',
23 |         2: '女'
24 |       })
25 |     }
26 |   }
27 | }
28 | </script>
29 | 
30 | <style scoped>
31 | .female {
32 |   color: #FFB6C1
33 | }
34 | .male {
35 |   color: #4169E1
36 | }
37 | </style>
38 | 
39 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     {{getPlace(row, 'birthPlace')}}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   props: {
10 |     msg: String,
11 |     row: Object
12 |   },
13 |   mounted() {
14 |     // console.log(this.row)
15 |   },
16 |   methods: {
17 |     getPlace (row) {
18 |        var space = ''
19 |         if (!row.birthPlace) return '-'
20 |         var curobj = row.birthPlace
21 |         while (curobj) {
22 |           if (curobj) {
23 |             space += curobj.name
24 |             curobj = curobj.child
25 |           } else {
26 |             break
27 |           }
28 |         }
29 |         return space
30 |     }
31 |   }
32 | }
33 | </script>
34 | 
35 | <!-- Add "scoped" attribute to limit CSS to this component only -->
36 | <style scoped>
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/components/MyCascader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <dg-cascader
 4 |     :options='options'
 5 |     :config='config'
 6 |     :props='myprops'
 7 |     ></dg-cascader>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import {
13 |   cities
14 | } from '../assets/js/simulationapi.js'
15 | export default {
16 |   props: ['config'],
17 |   data() {
18 |     return {
19 |       options: cities(),
20 |       myprops: {
21 |         value: 'code',
22 |         label: 'name',
23 |         children: 'children',
24 |         expandTrigger: 'hover'
25 |       }
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/components/MyDatePicker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <dg-date-picker
 4 |       :config="config"
 5 |       type="daterange"
 6 |       align="left"
 7 |       format="yyyy 年 MM 月 dd 日"
 8 |       value-format="yyyy-MM-dd"
 9 |     >
10 |     </dg-date-picker>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   props:['config'],
17 |   mounted() {
18 |     // console.log(this.config)
19 |   }
20 | }
21 | </script>
22 | 
23 | 


--------------------------------------------------------------------------------
/src/components/myFilter/MyInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="padding: 10px;width:200px">
 3 |     <el-input placeholder="请输入内容" v-model="val" class="input-with-select">
 4 |       <el-button
 5 |         slot="append"
 6 |         icon="el-icon-search"
 7 |         @click="confirm">
 8 |       </el-button>
 9 |     </el-input>
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: ['config'],
16 |   data() {
17 |     return {
18 |       val: ''
19 |     }
20 |   },
21 |   methods: {
22 |     confirm () {
23 |       this.$emit('__CUSTOM_FILTER_DATA__', {
24 |         value: this.val
25 |       })
26 |     }
27 |   }
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import ElementUI from 'element-ui'
 4 | import DGTable from '../lib'
 5 | import {
 6 |   DgDatePicker,
 7 |   DgCascader,
 8 |   DgFilterWrap  } from '../lib/packages'
 9 | import 'element-ui/lib/theme-chalk/index.css'
10 | import '../lib/css/index.css'
11 | 
12 | Vue.use(ElementUI)
13 | Vue.use(DGTable)
14 | Vue.component(DgDatePicker.name, DgDatePicker)
15 | Vue.component(DgCascader.name, DgCascader)
16 | Vue.component(DgFilterWrap.name, DgFilterWrap)
17 | Vue.config.productionTip = false
18 | 
19 | new Vue({
20 |   render: h => h(App),
21 | }).$mount('#app')
22 | 


--------------------------------------------------------------------------------