element的table的二次封装，操作列手动传入按钮 

//封装的table组件
1、table.vue 表格组件dataSource为表格数据，columns为列表中属性的值
 2 <template>
 3     <!-- 列表 -->
 4     <el-table
 5         :data="dataSource" 
　　　　　　:header-cell-style="{background:'#FAFAFA'}"
　　　　　　:row-style="{height:'60px'}"
　　　　　　:cell-style="{padding:'0px'}"
　　　　　　style="width: 100%;border-collapse:collapse"
 6         >
 7         <el-table-column 
 8             v-for="(column, index) in columns"
 9             header-align="center" 
10             v-if="column.isShow" 
11             :key="column.prop"
12             :show-overflow-tooltip="true"
13             :prop="column.prop" 
14             :label="column.label" 
15             :align="column.align"
16             :width="column.width">
17             
18         </el-table-column >
19         <el-table-column
20             label="操作"
21             v-if="isOperate">
22             <template slot-scope="scope">
23                 <slot :row='scope.row' :index='scope.$index'></slot>
24             </template>
25         </el-table-column>
26     </el-table>
27 </template>
28 <script>
29     export default {
30         name:"tables",
31         props:{
32             dataSource: {// 表格数据 默认为空数组
33                 type: Array,
34                 default: ()=> []
35             },
36             columns: {// 表格字段展示 默认为空数组
37                 type: Array,
38                 default: ()=>[]
39             },
40             isOperate: {
41                 type: Boolean,
42                 default: false
43             }
44         },
45     }
46 </script>
47 <style >
48 
49 </style>

2、table组件的使用

 1  <tables  :dataSource="dataSource" :columns="columns" :isOperate='true'>
 2          <template slot-scope="data">
 3                 <el-button
 4                
 5                 size="mini"
 6                 type="primary"
 7                 @click="attention(data.index, data.row)">互关</el-button>
 8                 <el-button
 9                
10                 size="mini"
11                 type="danger"
12                 @click="cancelAttention(data.index, data.row)">取关</el-button>
13             </template>
14       </tables>
 1  data () {
 2     return {
 3        dataSource:[{
 4                     'createTime':123,
 5                     'times':123,
 6                     'username':'jj',
 7                     'deptName':'ii',
 8                     'status':'0',
 9                 },{
10                     'createTime':123,
11                     'times':123,
12                     'username':'jj',
13                     'deptName':'ii',
14                     'status':'0',
15                 },{
16                     'createTime':123,
17                     'times':123,
18                     'username':'jj',
19                     'deptName':'ii',
20                     'status':'0',
21                 }],
22                 columns:[{
23                         hasSort: false, //true, false 是否排序
24                         isShow: true, //true, false<> 是否展示
25                         prop: 'createTime', //<String>  对应属性名
26                         label: '日期', //<String>   表头标签名称
27                         align: 'center',//表头内容是否居中 left right center
28                         width: 200, // 列宽
29                     },{
30                         hasSort: false, //<Boolean> 是否排序
31                         isShow: true, //<Boolean> 是否展示
32                         prop: 'times', //<String>  对应属性名
33                         label: '时间', //<String>   表头标签
34                         align: 'center'//表头内容是否居中
35                     },{
36                         hasSort: true, //<Boolean> 是否排序
37                         isShow: true, //<Boolean> 是否展示
38                         prop: 'username', //<String>  对应属性名
39                         label: '名字', //<String>   表头标签
40                         align: 'center'//表头内容是否居中
41                     },{
42                         hasSort: true, //<Boolean> 是否排序
43                         isShow: true, //<Boolean> 是否展示
44                         prop: 'deptName', //<String>  对应属性名
45                         label: '部门名称', //<String>   表头标签
46                         align: 'center'//表头内容是否居中
47                     },{
48                         hasSort: true, //<Boolean> 是否排序
49                         isShow: true, //<Boolean> 是否展示
50                         prop: 'status', //<String>  对应属性名
51                         label: '状态', //<String>   表头标签
52                         align: 'center'//表头内容是否居中
53                     }
54                 ],
55   
56     
57 
58 
59     }
60   },

 

posted @ 2020-11-25 13:51  luckstart  阅读(624)  评论(0)    收藏  举报