vue+element 表单相关项目问题（七）——时间选择器禁用

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

1.时间选择器超过当前时间禁用

1.1 初始样式

1.2官方文档

基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数 根据官方文档，我们可以看到控制日期的禁用可以使用disabledDate，具体实现如下:

1.3实现

<el-date-picker
          v-model="query.year"
          type="year"
          style="margin-left: 10px"
          placeholder="选择年份"
          value-format="yyyy"
          @change="search"
          :picker-options="pickerOptions"
        >
        </el-date-picker>

然后在data里面进行判断，当选择起的年份大于当前年份时禁用。

data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getFullYear() > new Date().getFullYear();
        },
      },
     },
    } 

这样就可以实现了。

1.3效果

2 tabs标签页点击跳转后，返回原来标签

2.1原始效果

2.2 实现过程

    <el-tabs v-model="tabSelected" @tab-click="tabSelect">
      <el-tab-pane
        label="销售总览"
        name="salesall"
        v-if="loginAdminUtil.validatePermission(['tydata-sell-stat-overview'])"
      >
        <FinanceSalesall></FinanceSalesall>
      </el-tab-pane>
      <el-tab-pane label="按人统计" name="salesperson">
        <FinanceSalesper></FinanceSalesper>
      </el-tab-pane>
      <el-tab-pane
        label="提成配置"
        name="salesconfig"
        v-if="loginAdminUtil.validatePermission(['tydata-sell-stat-overview'])"
      >
        <FinanceSalescon></FinanceSalescon>
      </el-tab-pane>
    </el-tabs>

首先绑定的tabSelected来控制tabs标签的选项，@tab-click="tabSelect"用来控制每一次tabs的点击，然后将每个标签的路由里加入参数，便于返回是判断。

data() {
    return {
      tabSelected: "salesall",//这里默认销售总览标签
      status: "0",
    };
  },

然后就是tabs的点击事件，将原始的e.index给到status，最后在当做参数传给当前路径。

tabSelect(e) {
      this.query = {
        status: e.index,
      };
      this.$router.replace({ path: this.path, query: this.query });
    },

接着写一个方法，根据status的值进行判断，对应到各自的标签里，具体操作如下：

updateType() {
      let status = this.$route.query.status;
      // 判断status的值，更改tabSelected的值
      if (status === "0") {
        this.tabSelected = "salesall";
      } else if (status === "1") {
        this.tabSelected = "salesperson";
      } else if (status === "2") {
        this.tabSelected = "salesconfig";
      }
    },

最后记得要挂载一下

mounted() {
    this.updateType();
  },

2.3 效果

3.根据权限的不同标签页也不同

3.1初始效果

拥有全部权限的用户 拥有普通权限的用户，只能看到一个没有激活的标签，需要手动点击

3.2实现

因为我们默认是销售总览的标签tabSelected: "salesall"，当普通用户登陆后是看不到这个标签所展示的页面的，所以打开就是一片空白，这里我们还是用到了上个问题中的status,通过status的值和绑定的tabSelected任选其一即可完成需求，代码如下：

 created() {
    if (this.loginAdminUtil.validatePermission(["tydata-sell-stat-overview"])) {
      this.status = "0";
      this.tabSelected = "salesall";
    } else if{
      this.status = "1";
      this.tabSelected = "salesperson";
    }else if{
      this.status = "2";
      this.tabSelected = "salesconfig";
    }
  },

3.3效果

点击这个模块后，直接显示当前激活标签页面 至此大功告成！ 由于是新手，最近遇到了很多棘手的问题，我将持续在掘金上更新！