feat(table): columns 配置 新增 customSlot 自定义插槽
This commit is contained in:
		
							parent
							
								
									402fb53d8b
								
							
						
					
					
						commit
						1675a4f06a
					
				| @ -4,6 +4,10 @@ | ||||
|   <lay-table :columns="columns" :dataSource="dataSource"> | ||||
|     <template v-slot:username="{ data }"> {{data.username}} </template> | ||||
|     <template v-slot:password="{ data }"> {{data.password}} </template> | ||||
|     <template v-slot:operator="{ data }"> | ||||
|       <lay-button type="primary">修改</lay-button> | ||||
|       <lay-button type="primary">删除</lay-button> | ||||
|     </template> | ||||
|   </lay-table> | ||||
| </template> | ||||
| 
 | ||||
| @ -28,54 +32,11 @@ export default { | ||||
|         title:"年龄", | ||||
|         width: "180px", | ||||
|         key:"age" | ||||
|       } | ||||
|     ] | ||||
| 
 | ||||
|     const dataSource = [ | ||||
|       {username:"root", password:"root", age:"18"}, | ||||
|       {username:"woow", password:"woow", age:"20"} | ||||
|     ] | ||||
| 
 | ||||
|     return { | ||||
|       columns, | ||||
|       dataSource | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </script> | ||||
| 
 | ||||
| ::: | ||||
| 
 | ||||
| ::: demo | ||||
| 
 | ||||
| <template> | ||||
|   <lay-table :columns="columns" :dataSource="dataSource"> | ||||
|     <template v-slot:username="{ data }"> {{data.username}} </template> | ||||
|     <template v-slot:password="{ data }"> {{data.password}} </template> | ||||
|   </lay-table> | ||||
| </template> | ||||
| 
 | ||||
| <script> | ||||
| import { ref } from 'vue' | ||||
| 
 | ||||
| export default { | ||||
|   setup() { | ||||
| 
 | ||||
|     const columns = [ | ||||
|       { | ||||
|         title:"账户", | ||||
|         width:"200px", | ||||
|         slot:"username", | ||||
|         key:"username" | ||||
|       },{ | ||||
|         title:"密码", | ||||
|         title:"操作", | ||||
|         width: "180px", | ||||
|         slot:"password", | ||||
|         key:"password" | ||||
|       },{ | ||||
|         title:"年龄", | ||||
|         width: "180px", | ||||
|         key:"age" | ||||
|         customSlot:"operator", | ||||
|         key:"operator" | ||||
|       } | ||||
|     ] | ||||
| 
 | ||||
|  | ||||
| @ -3635,7 +3635,6 @@ a cite { | ||||
| 
 | ||||
| .layui-table-view .layui-table { | ||||
| 	position: relative; | ||||
| 	width: auto; | ||||
| 	margin: 0; | ||||
| 	border-collapse: separate | ||||
| } | ||||
|  | ||||
| @ -70,8 +70,24 @@ | ||||
|                     </div> | ||||
|                   </td> | ||||
| 
 | ||||
|                   <template v-for="(value, key, index) in data" :key="index"> | ||||
|                     <template v-for="column in columns" :key="column"> | ||||
|                   <template v-for="column in columns" :key="column"> | ||||
|                    | ||||
|                     <template v-if="column.customSlot"> | ||||
|                       <td> | ||||
|                         <div | ||||
|                           :style="{ width: column.width }" | ||||
|                           style="padding: 0px 16px" | ||||
|                         > | ||||
|                           <slot :name="column.customSlot" :data="data"></slot> | ||||
|                         </div> | ||||
|                       </td> | ||||
|                     </template> | ||||
|                      | ||||
|                     <template | ||||
|                       v-else | ||||
|                       v-for="(value, key, index) in data" | ||||
|                       :key="index" | ||||
|                     > | ||||
|                       <td v-if="column.key == key"> | ||||
|                         <div | ||||
|                           :style="{ width: column.width }" | ||||
| @ -84,6 +100,7 @@ | ||||
|                         </div> | ||||
|                       </td> | ||||
|                     </template> | ||||
| 
 | ||||
|                   </template> | ||||
|                 </tr> | ||||
|               </template> | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user