优化element-ui表格数据结构
看下面的element-ui表格结构
1 <el-table :data="tableData" border style="width: 100%"> 2 <el-table-column fixed prop="date" label="日期" width="150"> 3 </el-table-column> 4 <el-table-column prop="name" label="姓名" width="160"> 5 </el-table-column> 6 <el-table-column prop="name" label="年龄" width="160"> 7 </el-table-column> 8 <el-table-column prop="name" label="身高" width="160"> 9 </el-table-column> 10 <el-table-column prop="name" label="体重" width="160"> 11 </el-table-column> 12 <el-table-column prop="province" label="省份" width="160"> 13 </el-table-column> 14 <el-table-column prop="city" label="市区" width="160"> 15 </el-table-column> 16 <el-table-column prop="address" label="地址" width="300"> 17 </el-table-column> 18 <el-table-column prop="zip" label="邮编" width="120"> 19 </el-table-column> 20 </el-table>
上面的20行代码只能描述表格的9列数据，当我们遇到十几列甚至是二十几列的表格数据，如果我们按照上面的罗列，代码会特别冗余
此时我们模仿iviewui的写法，去设置自己的表格结构
设置对应的增删数据方法
我们可以自己新建一个文件夹，处理和存放数据
methodData.js数据处理中心
1 /*综合了所有的关于table数据的方法*/ 2 export default class linkEnum{ 3 constructor(value){ 4 // console.log(value,123) 5 this.value=value 6 // 获取相关的obj 7 } 8 get(...val) { 9 // 如果当前的方法没有传入值，或或者不是数组，我们就返回所有 10 if (val.length === 0) return this.value 11 // 否则就获取对应的数据 12 // arr的作用就是返回得到的枚举数据 13 let arr = [] 14 // val是需要的数据 15 val.forEach((item) => { 16 // val的item和this.value的title进行一一匹配，从而获取对应的数据 17 this.value.forEach((name) => { 18 if (item === name.title) { 19 arr.push(name) 20 } 21 }) 22 }) 23 return arr 24 } 25 // 过滤对应的数据 26 // data指的是需要的过滤的数据源 27 // val是需要过滤的内容 28 un(val,data){ 29 let arr=data; 30 // 判断如果val是数组，则直接用数组，则直接用数组，不是将该数据转换为数组 31 let value = Array.isArray(val) ? val : [val]; 32 // 对数据进行过滤操作 33 return arr.filter((item) => !value.includes(item.title)) 34 } 35 // 头部增加方法 36 unshift(val,data){ 37 // data指的是需要的过滤的数据源 38 // val是需要增加的内容 39 let arr=data || []; 40 // 判断如果val是数组，则直接用数组，则直接用数组，不是将该数据转换为数组 41 let value = Array.isArray(val) ? val : [val]; 42 this.value.forEach((item)=>{ 43 if(value.includes(item.title)){ 44 arr.unshift(item) 45 } 46 }) 47 return arr 48 } 49 // 尾部增加方法 50 push(val, data) { 51 // data指的是需要的过滤的数据源 52 // val是需要增加的内容 53 let arr = data || [] 54 // 判断如果val是数组，则直接用数组，则直接用数组，不是将该数据转换为数组 55 let value = Array.isArray(val) ? val : [val]; 56 // 在整个大的数据源中进行查找增加 57 this.value.forEach((item) => { 58 if (value.includes(item.title)) { 59 arr.push(item) 60 } 61 }) 62 return arr 63 } 64 // 指定位置增加内容 65 insert(val,index,data){ 66 // val是需要增加的内容 67 // index指的是增加的下标位置 68 // data数据源 69 let arr = data; 70 // 判断如果val是数组，则直接用数组，则直接用数组，不是将该数据转换为数组 71 let value = Array.isArray(val) ? val : [val]; 72 // 在整个大的数据源中进行查找增加 73 this.value.forEach((item)=>{ 74 if(value.includes(item.title)){ 75 arr.splice(index,0,item) 76 } 77 }) 78 return arr 79 } 80 81 }
linkData.js数据管理中心
1 import linkEnum from "./methodsData" 2 /* 3 key 对应table表格的prop，也就是后端的返回字段 4 title 列表显示的名称（可拓展国际化） 5 width 列表的宽度 6 */ 7 const rq = { 8 key: 'date', 9 title: '日期', 10 width: '150' 11 } 12 const xm = { 13 key: 'date', 14 title: '姓名', 15 width: '160' 16 } 17 const nl = { 18 key: 'date', 19 title: '年龄', 20 width: '160' 21 } 22 const sg = { 23 key: 'date', 24 title: '身高', 25 width: '160' 26 } 27 const tz = { 28 key: 'date', 29 title: '体重', 30 width: '160' 31 } 32 const sf = { 33 key: 'date', 34 title: '省份', 35 width: '160' 36 } 37 const sq = { 38 key: 'date', 39 title: '市区', 40 width: '160' 41 } 42 const dz = { 43 key: 'date', 44 title: '地址', 45 width: '300' 46 } 47 const yb = { 48 key: 'date', 49 title: '邮编', 50 width: '120' 51 } 52 const DataObj = [rq,xm,nl,tz,sg,sf,sq,dz,yb] 53 export default new linkEnum(DataObj)
此时我们就可以引入并且调用相应的方法
比如我们在vue页面中获取相关内容
App.vue
1 <template> 2 <div> 3 <el-table :data="tableData" border style="width: 100%"> 4 <el-table-column fixed prop="date" label="日期" width="150"> 5 </el-table-column> 6 <el-table-column prop="name" label="姓名" width="160"> 7 </el-table-column> 8 <el-table-column prop="name" label="年龄" width="160"> 9 </el-table-column> 10 <el-table-column prop="name" label="身高" width="160"> 11 </el-table-column> 12 <el-table-column prop="name" label="体重" width="160"> 13 </el-table-column> 14 <el-table-column prop="province" label="省份" width="160"> 15 </el-table-column> 16 <el-table-column prop="city" label="市区" width="160"> 17 </el-table-column> 18 <el-table-column prop="address" label="地址" width="300"> 19 </el-table-column> 20 <el-table-column prop="zip" label="邮编" width="120"> 21 </el-table-column> 22 </el-table> 23 24 </div> 25 </template> 26 27 <script> 28 import linkData from "./link/linkData" 29 export default { 30 data() { 31 return { 32 cloumn:linkData.get('姓名','年龄','身高','体重','邮编'), 33 tableData: [{ 34 date: '2016-05-02', 35 name: '王小虎', 36 province: '上海', 37 city: '普陀区', 38 address: '上海市普陀区金沙江路 1518 弄', 39 zip: 200333 40 }, { 41 date: '2016-05-04', 42 name: '王小虎', 43 province: '上海', 44 city: '普陀区', 45 address: '上海市普陀区金沙江路 1517 弄', 46 zip: 200333 47 }, { 48 date: '2016-05-01', 49 name: '王小虎', 50 province: '上海', 51 city: '普陀区', 52 address: '上海市普陀区金沙江路 1519 弄', 53 zip: 200333 54 }, { 55 date: '2016-05-03', 56 name: '王小虎', 57 province: '上海', 58 city: '普陀区', 59 address: '上海市普陀区金沙江路 1516 弄', 60 zip: 200333 61 }] 62 } 63 }, 64 mounted(){ 65 console.log(this.cloumn,123456789) 66 // console.log(linkData.un('体重',this.cloumn),'00000') 67 // console.log(linkData.unshift('省份',this.cloumn),'00000') 68 // console.log(linkData.push('省份',this.cloumn),'00000') 69 console.log(linkData.insert('省份',1,this.cloumn),'00000') 70 71 } 72 73 } 74 </script> 75 76 <style lang="scss" scoped> 77 78 </style>
上面的column内容就是从linkData中得到的对应数据
比如我们还可以进行任意位置插入
console.log(linkData.insert('省份',1,this.cloumn),'00000')
封装属于自己的table组件
在components文件夹中设置一个BaseTable组件，用来拓展我们表格功能
1 <template> 2 <div> 3 <el-table v-bind='$attrs' v-on='$listeners' :data="data" style="width: 100%"> 4 <template v-for='(item,index) in column'> 5 <!--拓展slot--> 6 <template v-if="item.slot && item.slot == 'slot'"> 7 <el-table-column :key='index' :prop="item.key" :label="item.titleName" :width="item.width"> 8 <template slot-scope="scope"> 9 <!--通过具名插槽传递出去--> 10 <slot :name='item.key' :data='scope.row[item.key]'> 11 <span> 12 {{scope.row[item.key]}} 13 </span> 14 </slot> 15 </template> 16 </el-table-column> 17 </template> 18 <el-table-column v-else :key='index' :prop="item.key" :label="item.titleName" :width="item.width"> 19 </el-table-column> 20 </template> 21 </el-table> 22 </div> 23 </template> 24 25 <script> 26 export default { 27 props: { 28 data: { 29 type: Array, 30 require: true, 31 default: () => { 32 return [] 33 } 34 }, 35 column: { 36 type: Array, 37 require: true, 38 default: () => { 39 return [] 40 } 41 } 42 } 43 } 44 </script> 45 46 <style lang="scss" scoped> 47 48 </style>
此时结合我们之前的对数据的封装，我们可以把整个页面变得更加简单
1 <template> 2 <div> 3 <el-button type="primary" @click='changeLang'>切换语言</el-button> 4 <BaseTable :column='column' :data='tableData'> 5 <template v-slot:hdxs='{data}'> 6 {{data}}男 7 </template> 8 <template v-slot:ms='{data}'> 9 {{data | food}} 10 </template> 11 </BaseTable> 12 </div> 13 </template> 14 15 <script> 16 import linkData from '@/link/linkData' 17 import BaseTable from '@/components/BaseTable' 18 export default { 19 components: { 20 BaseTable 21 }, 22 data() { 23 return { 24 column: linkData.get("活动名称", "活动形式", '地推活动', '特殊资源', '线下主题', '美食'), 25 tableData: [{ 26 hdmc: '2016-05-02', 27 hdxs: '王小虎', 28 dthd: '上海', 29 tszy: '普陀区', 30 xxzt: '上海市普陀区金沙江路 1518 弄', 31 ms: 1 32 }, { 33 hdmc: '2016-05-02', 34 hdxs: '王小虎', 35 dthd: '上海', 36 tszy: '普陀区', 37 xxzt: '上海市普陀区金沙江路 1518 弄', 38 ms: 2 39 }, { 40 hdmc: '2016-05-02', 41 hdxs: '王小虎', 42 dthd: '上海', 43 tszy: '普陀区', 44 xxzt: '上海市普陀区金沙江路 1518 弄', 45 ms: 1 46 }, { 47 hdmc: '2016-05-02', 48 hdxs: '王小虎', 49 dthd: '上海', 50 tszy: '普陀区', 51 xxzt: '上海市普陀区金沙江路 1518 弄', 52 ms: 2 53 }] 54 } 55 }, 56 mounted() { 57 console.log(this.column, '878') 58 console.log(linkData.insert('省份', 3, this.column), '9987') 59 }, 60 methods: { 61 changeLang() { 62 63 let lang = localStorage.getItem("lang") == 'zh' ? 'en' : 'zh'; 64 this.$i18n.locale = lang 65 localStorage.setItem('lang', lang) 66 location.reload() 67 } 68 }, 69 filters: { 70 food(val) { 71 return val === 1 ? '好吃' : '不好吃' 72 } 73 } 74 } 75 </script> 76 77 <style scoped> 78 79 </style>
页面效果
