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:{
            // 父组件可以调用这个方法传入msg
            updateMsg(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>