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>