2019.7.31

今日心得

实现

1. 列表显示顺序修改

2. 设置element-ui隐藏显示的宽度

   

   <style lang="css">  /**  设置隐藏显示的宽度   */  
       .el-tooltip__popper{font-size: 14px; max-width:50% }
   </style>
   

3. 点击授权码的时候有隐藏的复制功能

   /** * 点击授权码数据可以进行复制 
   * 因为使用的是@row-click，它自带了3个参数：row，event，column 
   * column可以用来指定要哪个列才生效 
   */
   rowCopy(row,column){  
   	if(column.label == '授权码'){
   		this.$copyText(row.authCode).then((e) => {      
   			this.$alert('授权码已成功复制到剪切板', {type: 'success'});
   	},(e) => {
   		this.$alert(e, {
   			type: 'error'      
   		});    
   	});  
   }  
   else{    
   	return;  
   	}
   },
   

4. 修改缓存函数，状态为暂停时，刷新缓存不加载该条数据

5. 增加启用功能

问题

1. vue-clipboard在两种情况下会失效，即使数据有传进去：

   • 没有交互
   • 异步的时候

   因此才会出现将clipboard嵌入在新增函数里面，而新增由是嵌入式，因此就会出现没办法正常复制到剪切板的情况。

2. 使用@row-click的时候导致所有列都会相应

   解决方法：使用自带参数column进行限制

3. 

   过一会儿就自己好了0.0

4. 导入弹框会影响其他弹框

   解决方法：el-dialog里面的参数visible.sync重新命名，使其指向不同的弹出窗口。

其他

Table-column Attributes

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand	—
index	如果设置了 type=index，可以通过传递 index 属性来自定义索引	number, Function(index)	-	-
label	显示的标题	string	—	—
prop	对应列内容的字段名，也可以使用 property 属性	string	—	—
width	对应列的宽度	string	—	—
sortable	对应列是否可以排序，如果设置为 ‘custom’，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	boolean, string	true, false, ‘custom’	false
show-overflow-tooltip	当内容过长被隐藏时显示 tooltip	Boolean	—	false

Table-column Scoped Slot

name	说明
—	自定义列的内容，参数为 { row, column, $index }
header	自定义表头的内容. 参数为 { column, $index }

Tooltip 文字提示

Table Event

事件名	说明	参数
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event