vue中给el |
您所在的位置:网站首页 › ps5下载手机版免费 › vue中给el |
vue中给el-radio添加tooltip并实现点击跳转方式
给el-radio添加tooltip并实现点击跳转 {{toolTipContent}} New Youk goToRout(){ let routeData = this.$router.resolve({name: '/your url', params: {active:'1'}}); window.open(routeData.href, '_blank'); } 说明: (1)toolTipDisable:可控制tooltip是否可用 (2)slot=“content”:表示tooltip提示的内容指定已DOM格式插入到页面 (3)goToRout():路由跳转方法 (4)toolTipContent:提示的内容信息 element表格(el-table)自定义复选框(添加提示el-tooltip) 需求 表格想要存在禁用的行,用户想要有提示:为什么不可以勾选!!!(如下图) 使用表格自带的复选框无法实现该功能,因此需要自定义复选框 html代码: js代码: export default { data() { return { dataList: [], isCheck: false, indeterminate: false, enabledDataList: [],//这个指没有被禁用的行,进来组件的时候需要自己处理下 checkedCount: 0, selection: [] } }, methods: { handleCheckAllChange(value) { this.selection = value ? this.enabledDataList : []; this.indeterminate = false; this.$emit('input', this.selection) }, }, watch: { selection: { handler(v) { console.log(v) //这里采用监听selection的变化而不是使用el-checkbox-group的change事件是因为: // 在change事件中往父组件发消息时,表单已经完成了异步的验证,所以无法在表单验证前将选中的值发给父组件 if (this.enabledDataList.length) {//这个条件是判断需要有。。。。 let checkedCount = v.length; this.isCheck = checkedCount === this.enabledDataList.length; this.indeterminate = checkedCount > 0 && checkedCount < this.enabledDataList.length; } this.$emit('input', v) }, immediate: true } } }上面是实现代码的demo,亲测可以实现功能。 这里存在一个大坑(表单验证) 这表格我需要复用,因此我写成一个组件的形式,因此需要使用$emit(‘input’,选中的行)进行传值,但是这里存在一个问题,就是:我本用,在handleChange将改变的值传给父组件中的表格,在表格中我将该项设为必填,因此需要表单验证,但是这个的@change事件在表单验证之后才执行(我测试后得出的结果),因此选中一行的时候总会提示必填,即表单验证不通过。 解决办法: 使用watch监听selection变量 效果小优化 若不想要显示复选框右边的文字(由el-checkbox 的label设置,必填要有值),可以使用visibility: hidden; .el-checkbox__label { visibility: hidden; }总结 以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程宝库。 下一节:使用swiper自定义分页点击跳转指定页面JS 编程技术swiper自定义分页点击跳转指定页面mySwiper.slideTo(index, speed, runCallbacks),控制Swiper切换到指定slide。参数名类型是否必填 ... |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |