javascript 自定义多选框实现 ag-grid中没有原生多选框

前提：elementui的多选框无法再ag-grid中正常显示，ag-grid没有原生多选框，通过js设计一个多选框

• 标签上设置属性值
  为了达成特定的功能，需要在自定义属性上保存值

let _li = document.createElement("li")
_li.setAttribute("data-0518", JSON.stringify(data))//此处的data必须转换为字符串存储
_li.getAttribute("data-0518")//获取存储的字符串数据
_li.removeAttribute("data-0518");//移除属性//第二种附属性值的方法
<ul id="uu"><li src="10" >包子</li><li src="20" >馒头</li>
</ul>//或者直接在标签上附属性值，在使用js创建标签时，第一种方式更灵活

• 事件冒泡
  首先事件冒泡的简单原理：
  事件从DOM树的根节点开始，然后逐级向下捕获到最具体的元素（目标元素）。当事件捕获时，父级元素的事件处理程序会在子级元素的事件处理程序之前被触发。
  找到目标元素dom document → html → body → div

若想在下例中阻止li上的事件冒泡，则有以下几种方法

<ul id="myList" @click="fclick"><li id="_li" @click.stop="sonClick">Item 1</li>//通过使用stop在标签上阻止事件冒泡<li>Item 2</li><li>Item 3</li><li>Item 4</li>
</ul>_li.addEventListener("click",function(e){console.log("click-child");e.stopPropagation();
},false);//通过js在添加事件时使用stopPropagation()

• ag-grid自定义组件传值

//ag-grid的列定义如下，
columnDefs: [{headerName: "Colour 1",field: "value",cellRenderer: 'ColourComponent',cellRendererParams: {color: 'red'}},{headerName: "Colour 2",field: "value",cellRenderer: 'ColourComponent',     cellRendererParams: {color: 'blue'}}]
const ColourComponent = {template: '<span :style="{color: params.color}">{{params.value}}</span>'
};
//在使用该组件的vue文件中，或者标签中药使用“params”来获取cellRendererParams中的值

特别注意：使用props获取不到cellRendererParams中的值，ag-grid的cellRendererParams传值不会传到vue的props中

props:{color:{type:String,default:""}
}function _myFunction(){let _color = this.color//此处获取不到上文的red或者blue
}

• 多选框实现细节

1.点其他地放取消显示

bodyClick(e){let _option = document.querySelector(".options_list")if(...){//_option消失}
}
document.addEventListener("bodyClick")//重要的是在文档流上加上此事件，使的点击任意一处时，不显示多选框

2.定位下拉框出现位置

let _option 
_option.getBoundingClicentRect().left
_option.getBoundingClicentRect().top
//获取下拉框的在显示页面中的坐标

• vue组件间传值
  父子间最常见的props，emit传值省略

1.父子间refs传值
son:

<template><section>传过来的消息：{{msg}}</section>
</template><script>export default {name: "Children",components: {},data() {return {msg: '',desc:'The use of ref'}},methods:{// 父组件可以调用这个方法传入msgupdateMsg(msg){this.msg = msg}},}
</script>

parent:

//html
<Children ref="children"></Children>
//js
this.$refs.children.updateMsg('Have you received the clothes？')//即可调用上面子组件中的updateMsg方法

2.兄弟间传值：
child1:

<template><section><div @click="pushMsg">push message</div><br></section>
</template><script>import eventBus from './EventBus'export default {name: "Children1",components: {},data() {return {childNum:0}},methods: {pushMsg(){// 通过事件总线发送消息eventBus.$emit('pushMsg',this.childNum++)}}}
</script>

child2:

<template><section>children1传过来的消息：{{msg}}</section>
</template><script>import eventBus from './EventBus'export default {name: "Children2",components: {},data() {return {msg: ''}},mounted() {// 通过事件总线监听消息eventBus.$on('pushMsg', (children1Msg) => {this.msg = children1Msg})}}
</script>

Parent:

<template><div class="parent"><Children1></Children1><Children2></Children2></div>
</template><script>import Children1 from '../components/Children1'import Children2 from '../components/Children2'export default {name: 'Parent',components: {Children1,Children2},data() {return {}},methods:{}}
</script>