Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
3debb98a by 任超
Options

table组件引入

1 parent c57d4bb1
Inline Side-by-side
Showing 12 changed files with 634 additions and 94 deletions
1 export default {
2 selection: {
3 renderHeader: (h, { store }) => {
4 return (
5 <el-checkbox
6 disabled={store.states.data && store.states.data.length === 0}
7 indeterminate={
8 store.states.selection.length > 0 && !store.states.isAllSelected
9 }
10 nativeOn-click={store.toggleAllSelection}
11 value={store.states.isAllSelected}
12 />
13 )
14 },
15 renderCell: (h, { row, column, store, $index }) => {
16 return (
17 <el-checkbox
18 nativeOn-click={event => event.stopPropagation()}
19 value={store.isSelected(row)}
20 disabled={
21 column.selectable
22 ? !column.selectable.call(null, row, $index)
23 : false
24 }
25 on-input={() => {
26 store.commit('rowSelectedChanged', row)
27 }}
28 />
29 )
30 },
31 sortable: false,
32 resizable: false
33 },
34 index: {
35 renderHeader: (h, scope) => {
36 return <span>{scope.column.label || '#'}</span>
37 },
38 renderCell: (h, { $index, column }) => {
39 let i = $index + 1
40 const index = column.index
41
42 if (typeof index === 'number') {
43 i = $index + index
44 } else if (typeof index === 'function') {
45 i = index($index)
46 }
47
48 return <div>{i}</div>
49 },
50 sortable: false
51 },
52 expand: {
53 renderHeader: (h, scope) => {
54 return <span>{scope.column.label || ''}</span>
55 },
56 renderCell: (h, { row, store }, proxy) => {
57 const expanded = store.states.expandRows.indexOf(row) > -1
58 return (
59 <div
60 class={
61 'el-table__expand-icon ' +
62 (expanded ? 'el-table__expand-icon--expanded' : '')
63 }
64 on-click={e => proxy.handleExpandClick(row, e)}
65 >
66 <i class='el-icon el-icon-arrow-right' />
67 </div>
68 )
69 },
70 sortable: false,
71 resizable: false,
72 className: 'el-table__expand-column'
73 }
74 }
1 import lbTable from './lb-table.vue'
2 export default {
3 install:(Vue) => {
4 Vue.component('lbTable',lbTable);
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
1 /*
2 * FileName: lb-column.vue
3 * Remark: element-column
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:58:23 am
7 * Last Modified: Tuesday, 19th March 2019 10:14:42 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <el-table-column v-bind="$attrs"
13 v-on="$listeners"
14 :prop="column.prop"
15 :label="column.label"
16 :type="column.type"
17 :index="column.index"
18 :column-key="column.columnKey"
19 :width="column.width"
20 :min-width="setColumnWidth(column.label)"
21 :fixed="column.fixed"
22 :scoped-slot="column.renderHeader"
23 :sortable="column.sortable || false"
24 :sort-method="column.sortMethod"
25 :sort-by="column.sortBy"
26 :sort-orders="column.sortOrders"
27 :resizable="column.resizable || true"
28 :formatter="column.formatter"
29 :show-overflow-tooltip="column.showOverflowTooltip != null ? column.showOverflowTooltip : true"
30 :align="column.align!=null ? column.align : 'left'"
31 :header-align="column.headerAlign || headerAlign || column.align || align || 'left'"
32 :class-name="column.className"
33 :label-class-name="column.labelClassName"
34 :selectable="column.selectable"
35 :reserve-selection="column.reserveSelection || false"
36 :filters="column.filters"
37 :filter-placement="column.filterPlacement"
38 :filter-multiple="column.filterMultiple"
39 :filter-method="column.filterMethod"
40 :filtered-value="column.filteredValue">
41 <template slot="header"
42 slot-scope="scope">
43 <lb-render v-if="column.renderHeader"
44 :scope="scope"
45 :render="column.renderHeader">
46 </lb-render>
47 <span v-else>{{ scope.column.label }}</span>
48 </template>
49
50 <template slot-scope="scope">
51 <lb-render :scope="scope"
52 :render="column.render">
53 </lb-render>
54 </template>
55
56 <template v-if="column.children">
57 <lb-column v-for="(col, index) in column.children"
58 :key="index"
59 :column="col">
60 </lb-column>
61 </template>
62 </el-table-column>
63 </template>
64
65 <script>
66 import LbRender from './lb-render'
67 import forced from './forced.js'
68 export default {
69 name: 'LbColumn',
70 props: {
71 column: Object,
72 headerAlign: String,
73 align: String
74 },
75 components: {
76 LbRender
77 },
78 methods: {
79
80 setColumnWidth(str) {
81 let columnWidth = 0;
82 for (let char of str) {
83 if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
84 // 如果是英文字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
85 columnWidth += 10
86 } else if (char >= '\u4e00' && char <= '\u9fa5') {
87 // 如果是中文字符，为字符分配14个单位宽度，单位宽度可根据字体大小调整
88 columnWidth += 14
89 } else {
90 // 其他种类字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
91 columnWidth += 10
92 }
93 }
94 if (columnWidth < 120) {
95 // 设置最小宽度
96 columnWidth = 120
97 }
98 return columnWidth + 'px'
99 },
100 setColumn () {
101 if (this.column.type) {
102 this.column.renderHeader = forced[this.column.type].renderHeader
103 this.column.render = this.column.render || forced[this.column.type].renderCell
104 }
105 if (this.column.formatter) {
106 this.column.render = (h, scope) => {
107 return <span>{ scope.column.formatter(scope.row, scope.column, scope.row, scope.$index) }</span>
108 }
109 }
110 if (!this.column.render) {
111 this.column.render = (h, scope) => {
112 return <span>{ scope.row[scope.column.property] }</span>
113 }
114 }
115 }
116 },
117 watch: {
118 column: {
119 handler () {
120 this.setColumn()
121 },
122 immediate: true
123 }
124 }
125 }
126 </script>
1 /*
2 * FileName: lb-render.vue
3 * Remark: 自定义render
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 10:15:30 am
7 * Last Modified: Tuesday, 19th March 2019 10:15:32 am
8 * Modified By: 任超
9 */
10 <script>
11 export default {
12 name: 'LbRender',
13 functional: true,
14 props: {
15 scope: Object,
16 render: Function
17 },
18 render: (h, ctx) => {
19 return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
20 }
21 }
22 </script>
1 /*
2 * FileName: lb-table.vue
3 * Remark: element table
4 * Project: lb-element-table
5 * Author: 任超
6 * File Created: Tuesday, 19th March 2019 9:55:27 am
7 * Last Modified: Tuesday, 19th March 2019 9:55:34 am
8 * Modified By: 任超
9 */
10
11 <template>
12 <div :class="['lb-table', customClass]">
13 <el-table ref="elTable" :row-class-name="tableRowClassName" :border="border" :show-header='showHeader'
14 :header-cell-style="{ background: '#F8FAFA' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
15 :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
16 <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
17 </lb-column>
18 </el-table>
19 <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
20 :page-sizes="[10, 15, 20, 50]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
21 :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
22 </el-pagination>
23 </div>
24 </template>
25
26 <script>
27 import LbColumn from './lb-column'
28 export default {
29 props: {
30 column: Array,
31 data: Array,
32 spanMethod: Function,
33 pagination: {
34 type: Boolean,
35 default: true,
36 },
37 border: {
38 type: Boolean,
39 default: false,
40 },
41 showHeader: {
42 type: Boolean,
43 default: true,
44 },
45 paginationTop: {
46 type: String,
47 default: '0',
48 },
49 heightNum: {
50 type: Number,
51 default: 255,
52 },
53 heightNumSetting: {
54 type: Boolean,
55 default: false,
56 },
57 customClass: {
58 type: String,
59 default: '',
60 },
61 paginationAlign: {
62 type: String,
63 default: 'right',
64 },
65 merge: Array,
66 },
67 components: {
68 LbColumn,
69 },
70 data () {
71 return {
72 tableHeight: '100%',
73 mergeLine: {},
74 mergeIndex: {},
75 }
76 },
77 created () {
78 this.getMergeArr(this.data, this.merge)
79 this.getHeight()
80
81 },
82 mounted () {
83 },
84 computed: {
85 dataLength () {
86 return [] || this.data.length
87 },
88 },
89 methods: {
90 tableRowClassName ({ row, rowIndex }) {
91 if (rowIndex % 2 === 1) {
92 return 'interlaced';
93 }
94 },
95 getHeight () {
96 if (this.heightNumSetting) {
97 this.tableHeight = this.heightNum + 'px'
98 } else {
99 this.tableHeight = window.innerHeight - this.heightNum + 'px'
100 }
101 },
102 changeHeight (heightNum) {
103 this.tableHeight = heightNum + 'px'
104 },
105 clearSelection () {
106 this.$refs.elTable.clearSelection()
107 },
108 toggleRowSelection (row, selected) {
109 this.$refs.elTable.toggleRowSelection(row, selected)
110 },
111 toggleAllSelection () {
112 this.$refs.elTable.toggleAllSelection()
113 },
114 toggleRowExpansion (row, expanded) {
115 this.$refs.elTable.toggleRowExpansion(row, expanded)
116 },
117 setCurrentRow (row) {
118 this.$refs.elTable.setCurrentRow(row)
119 },
120 clearSort () {
121 this.$refs.elTable.clearSort()
122 },
123 clearFilter (columnKey) {
124 this.$refs.elTable.clearFilter(columnKey)
125 },
126 doLayout () {
127 this.$refs.elTable.doLayout()
128 },
129 sort (prop, order) {
130 this.$refs.elTable.sort(prop, order)
131 },
132 paginationCurrentChange (val) {
133 this.$emit('p-current-change', val)
134 },
135 getMergeArr (tableData, merge) {
136 if (!merge) return
137 this.mergeLine = {}
138 this.mergeIndex = {}
139 merge.forEach((item, k) => {
140 tableData.forEach((data, i) => {
141 if (i === 0) {
142 this.mergeIndex[item] = this.mergeIndex[item] || []
143 this.mergeIndex[item].push(1)
144 this.mergeLine[item] = 0
145 } else {
146 if (data[item] === tableData[i - 1][item]) {
147 this.mergeIndex[item][this.mergeLine[item]] += 1
148 this.mergeIndex[item].push(0)
149 } else {
150 this.mergeIndex[item].push(1)
151 this.mergeLine[item] = i
152 }
153 }
154 })
155 })
156 },
157 mergeMethod ({ row, column, rowIndex, columnIndex }) {
158 const index = this.merge.indexOf(column.property)
159 if (index > -1) {
160 const _row = this.mergeIndex[this.merge[index]][rowIndex]
161 const _col = _row > 0 ? 1 : 0
162 return {
163 rowspan: _row,
164 colspan: _col,
165 }
166 }
167 },
168 },
169 watch: {
170 merge () {
171 this.getMergeArr(this.data, this.merge)
172 },
173 dataLength () {
174 this.getMergeArr(this.data, this.merge)
175 }
176 },
177 }
178 </script>
179 <style rel="stylesheet/scss" lang="scss" >
180 .lb-table {
181 .interlaced {
182 background: #FCFDFD;
183 ;
184 border: 1px solid #ECECEE;
185 }
186
187 .el-table {
188 border: 1px solid #ECECEE;
189 border-radius: 4px 4px 0 0;
190 }
191
192 .el-table::before {
193 display: none;
194 }
195
196 .el-table--enable-row-hover .el-table__body tr:hover>td {
197 background: #FBFCFD !important;
198 }
199 }
200
201 .el-table th>.cell {
202 padding-left: 20px;
203 }
204
205 .el-table .cell {
206 padding-left: 20px;
207 }
208 </style>
1 ## 这是对于element-table 进行的二次封装
2
3 ### 文档地址
4
5 <!-- table 已经全局注册不需要每个页面单独注册 -->
6
7 [Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)
...@@ -101,7 +101,6 @@ export default { ...@@ -101,7 +101,6 @@ export default {
101 const { name } = this.$route 101 const { name } = this.$route
102 if (name) { 102 if (name) {
103 this.$store.dispatch('tagsView/addView', this.$route) 103 this.$store.dispatch('tagsView/addView', this.$route)
104 console.log(this.visitedViews, name);
105 } 104 }
106 return false 105 return false
107 }, 106 },
......
...@@ -6,6 +6,7 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets ...@@ -6,6 +6,7 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
6 import Element from 'element-ui' 6 import Element from 'element-ui'
7 import './styles/element-variables.scss' 7 import './styles/element-variables.scss'
8 import '@/styles/index.scss' // global css 8 import '@/styles/index.scss' // global css
9 import lbTable from './components/lb-table/index';
9 10
10 import './image/icons' // icon 11 import './image/icons' // icon
11 import store from './store' 12 import store from './store'
...@@ -13,9 +14,8 @@ import router from './router' ...@@ -13,9 +14,8 @@ import router from './router'
13 import _ from 'lodash' 14 import _ from 'lodash'
14 15
15 import * as filters from './filters' // global filters 16 import * as filters from './filters' // global filters
16 Vue.use(Element, { 17 Vue.use(Element, { size: 'small' })
17 size: 'small' 18 Vue.use(lbTable);
18 })
19 Object.keys(filters).forEach(key => { 19 Object.keys(filters).forEach(key => {
20 Vue.filter(key, filters[key]) 20 Vue.filter(key, filters[key])
21 }) 21 })
......
1 // table 内部过滤器 由于过滤器只能在模板中使用 所以 就有了 jsx内部方法过滤器
2 export default class filter {
3 // 业务来源
4 busSource(val) {
5 let status = { 1: '办事大厅', 2: '微信小程序',default: '暂无' }
6 return status[val]
7 }
8 }
1 export default {
2 methods: {
3 handleSelectionChange (val) {
4 console.log(val);
5 },
6 handleSizeChange (val) {
7 console.log(val);
8 },
9 handleCurrentChange (val) {
10 console.log(val);
11 },
12 }
13 }
1 <template> 1 <template>
2 <keep-alive include="dbx"> 2 <div class="from-clues">
3 <div class="from-clues"> 3 <!-- 表单部分 -->
4 <!-- 表单部分 --> 4 <div class="from-clues-header">
5 <div class="from-clues-header"> 5 <el-form :model="queryForm" ref="queryForm" label-width="70px">
6 <el-form :model="queryForm" ref="queryForm" label-width="70px"> 6 <el-row>
7 <el-row> 7 <el-col :span="5">
8 <el-col :span="5"> 8 <el-form-item label="业务来源">
9 <el-form-item label="业务来源"> 9 <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
10 <el-select 10 <el-option v-for="item in ywlys" :key="item.value" :label="item.label" :value="item.value">
11 v-model="queryForm.ywly" 11 </el-option>
12 filterable 12 </el-select>
13 clearable 13 </el-form-item>
14 placeholder="请选择业务来源" 14 </el-col>
15 > 15 <el-col :span="5">
16 <el-option 16 <el-form-item label="权利类型">
17 v-for="item in ywlys" 17 <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
18 :key="item.value" 18 <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
19 :label="item.label" 19 </el-option>
20 :value="item.value" 20 </el-select>
21 > 21 </el-form-item>
22 </el-option> 22 </el-col>
23 </el-select> 23 <el-col :span="5">
24 </el-form-item> 24 <el-form-item label="登记类型">
25 </el-col> 25 <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
26 <el-col :span="5"> 26 <el-option v-for="item in djlxs" :key="item.value" :label="item.label" :value="item.value">
27 <el-form-item label="权利类型"> 27 </el-option>
28 <el-select 28 </el-select>
29 v-model="queryForm.qllx" 29 </el-form-item>
30 filterable 30 </el-col>
31 clearable 31 <el-col :span="5">
32 placeholder="请选择权利类型" 32 <el-form-item label="业务号">
33 > 33 <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
34 <el-option 34 </el-input>
35 v-for="item in qllxs" 35 </el-form-item>
36 :key="item.value" 36 </el-col>
37 :label="item.label"
38 :value="item.value"
39 >
40 </el-option>
41 </el-select>
42 </el-form-item>
43 </el-col>
44 <el-col :span="5">
45 <el-form-item label="登记类型">
46 <el-select
47 v-model="queryForm.djlx"
48 filterable
49 clearable
50 placeholder="请选择登记类型"
51 >
52 <el-option
53 v-for="item in djlxs"
54 :key="item.value"
55 :label="item.label"
56 :value="item.value"
57 >
58 </el-option>
59 </el-select>
60 </el-form-item>
61 </el-col>
62 <el-col :span="5">
63 <el-form-item label="业务号">
64 <el-input
65 placeholder="请输入业务号"
66 v-model="queryForm.ywh"
67 clearable
68 class="width200px"
69 >
70 </el-input>
71 </el-form-item>
72 </el-col>
73 37
74 <el-col :span="4" class="btnCol"> 38 <el-col :span="4" class="btnCol">
75 <el-form-item> 39 <el-form-item>
76 <el-button type="primary" @click="queryClick()">查询</el-button> 40 <el-button type="primary" @click="queryClick()">查询</el-button>
77 <el-button @click="moreScreeningClick()">更多选项</el-button> 41 <el-button @click="moreScreeningClick()">更多选项</el-button>
78 </el-form-item> 42 </el-form-item>
79 </el-col> 43 </el-col>
80 </el-row> 44 </el-row>
81 </el-form> 45 </el-form>
82 </div>
83 <!-- 表格 -->
84 </div> 46 </div>
85 </keep-alive> 47 <!-- 表格 -->
48 <div>
49 <lb-table :page-size="pageData.size" @sort-change="handleSort" :current-page.sync="pageData.current"
50 :total="pageData.total" @selection-change="handleSelectionChange" @size-change="handleSizeChange"
51 @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
52 </lb-table>
53 </div>
54 </div>
86 </template> 55 </template>
87 <script> 56 <script>
57 import table from '@/utils/mixin/table'
58 import { datas, sendThis } from "./dbxdata"
88 export default { 59 export default {
89 name: "dbx", 60 name: "dbx",
90 components: {}, 61 components: {},
91 mounted() {}, 62 mixins: [table],
92 data() { 63 mounted () {
64 sendThis(this);
65 },
66 data () {
93 return { 67 return {
94 queryForm: { 68 queryForm: {
95 ywly: "", 69 ywly: "",
...@@ -97,15 +71,38 @@ export default { ...@@ -97,15 +71,38 @@ export default {
97 djlx: "", 71 djlx: "",
98 ywh: "", 72 ywh: "",
99 }, 73 },
74 pageData: {
75 current: 1,
76 size: 10,
77 total: 2
78 },
79 tableData: {
80 columns: datas.columns(),
81 data: [
82 {
83 slsj: '2022-5-12'
84 },
85 {
86 slsj: '2022-5-13'
87 }
88 ]
89 }
90 }
91 },
92 methods: {
93 // 初始化数据
94 fetchData () {
100 95
101 commentData: {}, 96 },
102 }; 97 handleSort (name, sort) {
98 console.log(name, sort);
99 },
100 openDialog () {
101 console.log(999999999999999);
102 }
103 }, 103 },
104 created() {}, 104 }
105 methods: {},
106 };
107 </script> 105 </script>
108
109 <style scoped lang="scss"> 106 <style scoped lang="scss">
110 @import "~@/styles/public.scss"; 107 @import "~@/styles/public.scss";
111 </style> 108 </style>
......
1 import filter from '@/utils/filter.js'
2 let vm = null
3
4 const sendThis = (_this) => {
5 vm = _this
6 }
7 class data extends filter {
8 constructor() {
9 super()
10 }
11 columns () {
12 return [
13 {
14 label: '序号',
15 type: 'index',
16 width: '50'
17 },
18 {
19 prop: "ywly",
20 label: "业务来源",
21 },
22 {
23 prop: "lczt",
24 label: "流程状态",
25 },
26 {
27 prop: "zbhj",
28 label: "在办环节",
29 },
30 {
31 prop: "ywh",
32 label: "业务号",
33 },
34 {
35 prop: "sqywmc",
36 label: "申请业务名称",
37 },
38 {
39 prop: "qlr",
40 label: "权利人",
41 },
42 {
43 prop: "ywr",
44 label: "义务人",
45 },
46 {
47 prop: "zl",
48 label: "坐落",
49 },
50 {
51 prop: "slsj",
52 label: "受理时间",
53 sortable: 'custom'
54 },
55 {
56 prop: "slry",
57 label: "受理人员",
58 },
59 {
60 prop: "zrsj",
61 label: "转入时间",
62 sortable: 'custom'
63 },
64 {
65 label: '操作',
66 width: '80',
67 align: 'center',
68 fixed: 'right',
69 render: (h, scope) => {
70 return <el-button type="text" icon="el-icon-delete" onClick={() => { vm.openDialog(scope) }}>编辑</el-button>
71 }
72 }
73 ]
74 }
75 }
76 let datas = new data()
77 export {
78 datas,
79 sendThis
80 }
......