Vue 学习笔记 04——TabPanel

最新推荐文章于 2024-09-24 08:17:18 发布

thingir

最新推荐文章于 2024-09-24 08:17:18 发布

阅读量1.4k

点赞数

分类专栏： vue iview 文章标签： vue.js

本文链接：https://blog.csdn.net/thingir/article/details/104954571

版权

vue 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

iview

4 篇文章 0 订阅

订阅专栏

Vue 学习笔记 01——iview

Vue 学习笔记 02

Vue 学习笔记 03——组件篇

Vue 学习笔记 04——TabPanel

Vue 学习笔记 05——状态管理Vuex

===================================正文分割线==================================

1.渲染函数 Render

render: function (createElement,context) {
	    return createElement('span', '替代的文字内容');
}

render函数提供两个参数：

a）createElement 函数：具体参数见官网文档

https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM

b）context 参数，官网解释如下：

context 意为上下文，在表格中，获取的内容则是每一行的数据

c）使用案例：

案例1：1 代表 已完成，2 代表 未完成，类别显示应为“已完成 ” 或 “未完成 ”，后台返回的是1或 2，此时需要对列的数据显示进行判断，可以使用 render 函数

var columns1=[
  ...
  {
		title:'表头标题',
		key:'bt',
		render: function (createElement,context) {
			if(context.row.bt==null || context.row.bt==''){
				return createElement('span', ''); //判断表格内容为空情况，要先判断null
			}else{
				return createElement('span', context.row.bt=='1' ? '第一种情况': '第二种情况');  //不为空情况的显示文字
			}

		},
		width:100

	},
    ...
]

案例2：表格中的数据有html标签，需要对数据格式进行转换，需要用到createElement 函数参数中的DOM属性

var columns1=[
  ...
  {
		title:'表头标题',
		key:'bt',
		render: function (createElement,context) {
				return createElement('span', { domProps:{innerHTML:context.row.bt}} );  //对带有html标签的文字转换
		

		},
		width:100

	},
    ...
]

2.Tab选项卡的使用

需要注意几点：

a）@on-click 事件是在 Tabs 标签上的，并且默认返回的为name值，可以通过绑定name值来确定切换到哪个选项卡

b）另一种用法：例如每个选项卡下的内容对应的都是 table ，则可以把 table 单独拿出来，共用一个 table，通过 tab 的 name值来判断 table 里的数据显示

<Tabs  @on-click="changeTab($event)">
	        <Tab-Pane label="已选"></Tab-Pane>
	        <Tab-Pane v-for="item in tablist" :key="item.id" :label="item.xkfsmc" :name="item.xkfsdm">
	        </Tab-Pane>
	    </Tabs>

3.数值比较

a）文本框获取的为字符型，想要对输入的数值做比较，需要在判断时用 Number(val) 来转换成数值型

if(Number(val.jfs) ==0 || Number(val.jfs) < 0){
	self.$Message.error('请填写正确的积分');
	return ;
}

b）对填入的数值，需要判断几种情况：

1）不为空；

2）为0 或小于 0 ；

3）大于限定的值；

if(val.jfs =='' || val.jfs == null ){
	self.$Message.error('请填写积分');
	return ;
}
else if(Number(val.jfs) ==0 || Number(val.jfs) < 0){
	self.$Message.error('请填写正确的积分');
	return ;
}
else if(Number(val.jfs) > Number(self.xkgzszOne.jfxs)){
	self.$Message.error('超出可选积分');
	return ;
}

4. 时间比较

通过时间比较，来判断当前功能按钮是否可用

a）通过 new Date() 获取当前时间 或 转换成标准时间，然后使用 getTime() 来把时间转换成数值，方便比较

var curTime = (new Date()).getTime();
var timeS= (new Date(startTime)).getTime();
var timeE= (new Date(endTime)).getTime();

console.log(new Date());  // Wed Mar 18 2020 22:31:17 GMT+0800 (中国标准时间)
console.log(curTime);     // 1584541877493

b）对于表格内的按钮，可以使用三目运算符来判断是否禁用

<i-button @click="cz(handle.row)" :disabled="new Date().getTime() > new Date(handle.row.ktxkkssj).getTime() && new Date().getTime() < new Date(handle.row.ktxkjssj).getTime() ? false : true ">禁用</i-button>