个性化html渲染

解决一个组件返回一个元素

GTable.vue ``` {columns && columns.map((col,i) => { return })} ```

GColumn.vue

props:{
	column:{
		type:Object,
		required:true
	}
}

render() {
	return this.renderTableCol(this.column)
}

~~loanListConf.js下

label:'自定义html',
formatter:function(prop) {
		console.log(prop,'prop');
		return `<div>
				<h2>123</h2>
				<button> 456 </button>
				</div>`
}

GColumn.vue
renderTableCol下

let scopedSlots;
scoped

el-table-column下

scopedSlots = { scopedSlots }~~ 

新建directives下的index.js

import dragTable from './dragTable'
function install(Vue) {
		Vue.directive(dragTable.name, dragTable.handler)
}

export default {
	install
}

在directives下新建dragTable.js

export default { //自定义的东西，为了和外面交互
		name:'drag',
		handle: {
		// 元素，修饰符，虚拟node
				inserted: function(el,binding,vnode){
						console.log('el====',el);
		}}}

main 中引入directives

import directives from './directives'
Vue.use(directives)

GTable下加指令 directives下

{
	name:'drag'
}

在directives下新建dragTable.js
handle下

let target = el.getElementsByClassName('el-table_body-wrapper')[0];
console.log(target,'target');

结构如图：

target.style.overflowX = 'hidden';
target.style.cursor = 'grab'

屏幕拖拽逻辑

// 鼠标按下
target.onmousedown = function(event) {
		console.log('鼠标按下：',event.clientX);
		// 记录鼠标移动，记录document的移动
		target.onmousemove = function(e) {
				移动到的位置
				console.log(e.clientX)
}	}

超出就不行了，就没有clientX的记录了。

保留原来的scrollLeft
1 加入原来卷进去的是80，
2 现在横向移动20
3 那么移动80+20，必须保留原来的scrollLeft进行计算
将target换成document ,document的移动需要消除

document.onmousedown = function(event) {
		console.log('鼠标按下：',event.clientX);
		// 记录鼠标移动，记录document的移动
		document.onmousemove = function(e) {
				移动到的位置
				console.log(e.clientX)
}	}

消除

document.onmouseup = function() {
	document.onmouseup = null;
	document.onmousemove = null;
}

记录差值

// 记录鼠标的初始点
let startPointX = event.clientX;

// 获取初始的scollLeft值，后续计算使用
let startScollLeft = target.scrollLeft;

onmousemove的函数下

let x = e.clientX - startPoint;
target.scrollLeft = startScollLeft - x ;

unbind: function(el) {
	let target = el.getElementsByClassName('e--table_body-wrapper')[0];
	target.mousedown = null;
}

index.vue
搜索功能

<el-input type="text" v-model = "query"></el-input>

watch: {
	query(newV ){
		this. loadLoanByPage(1);
}
}

loadLoanByPage

.trim

let params = {
		if(!this.query && this.query.trim() !=' ') {
			params.name = query;
}
}

data 下

query: ' '

green连续五个请求

解决上述，加一个防抖
utils -> index.js

export function deounce(func,wait = 1000) {
	let timeout;
	return function() {
		clearTimeout(timeout)
		timeout = setTimeout(func,wait)
}
}

input-manager

import {debounce} from '@/utils'

data 加入debounceQuery

watch下加入

封装组件