avue 搜索的时候是日期范围,列表显示和新增修改是日期时;显隐不好使

因为使用的是同一个prop值

1.将俩个值修改成不同的
2.给其中一个设置hide:true

                     {
                        label: "建设日期",
                        prop: "buildDaterange",
                        type: "daterange",
                        format: 'yyyy-MM-dd',
                        searchRange: true,
                        valueFormat: 'yyyy-MM-dd',
                        search: true,
                        hide: true,
                        addDisplay: false,
                        editDisplay: false
                    },
                    {
                        label: "建设日期",
                        prop: "buildDate",
                        type: "date",
                        format: 'yyyy-MM-dd',
                        valueFormat: 'yyyy-MM-dd',
                    },


3.在onload中修改请求参数

 onLoad(page, params = {}) {
            this.loading = true
            if (this.query.buildDaterange) {
                this.query.buildDateStart = this.query.buildDaterange[0];
                this.query.buildDateEnd = this.query.buildDaterange[1];
                delete this.query.buildDaterange;
            }
            getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                const data = res.data.data
                this.page.total = data.total
                this.data = data.records
                this.loading = false
                this.selectionClear()
            })
        }


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端权限管理主要是通过控制前端页面上的元素或者控件来实现不同用户之间的权限区分。一般来说,前端权限管理需要配合后端进行实现,后端会返回当前用户可见的页面元素或者控件列表,前端再根据这个列表进行权限的控制。下面是一个简单的前端权限管理的实现思路和示例代码: 1. 定义权限控制指令 在前端中,我们可以通过自定义指令来控制页面元素的显隐或者禁用。我们可以定义一个权限控制指令,该指令可以根据当前用户的权限判断是否需要显示或者禁用某个元素。 例如,我们可以定义一个名为`v-permission`的权限控制指令,用于控制某个元素是否需要显示或者禁用。在模板中使用该指令,可以通过指定权限名称来判断当前用户是否有权限。 ``` <template> <div> <button v-permission="'edit'" @click="handleEdit">编辑</button> <button v-permission="'delete'" @click="handleDelete">删除</button> </div> </template> <script> export default { methods: { handleEdit() { // ... }, handleDelete() { // ... }, }, }; </script> ``` 2. 获取当前用户的权限列表 前端需要通过后端接口获取当前用户的权限列表,该列表包含当前用户有权限访问的页面元素或者控件列表。在获取到权限列表后,前端可以通过`v-permission`指令进行权限控制。 例如,我们可以在前端中定义一个名为`getPermissions`的方法,该方法通过调用后端接口获取当前用户的权限列表。在获取到权限列表后,将其保存到前端的状态管理中,以便后续的使用。 ``` <script> export default { data() { return { permissions: [], }; }, methods: { async getPermissions() { const response = await fetch('/api/permissions'); const { data } = await response.json(); this.permissions = data; }, }, created() { this.getPermissions(); }, }; </script> ``` 3. 实现权限控制指令 前端需要在自定义指令中实现权限的控制逻辑。我们可以在`v-permission`指令中获取权限名称,然后判断当前用户是否有该权限。如果当前用户有权限,则显示该元素或者启用该控件,否则隐藏该元素或者禁用该控件。 例如,我们可以在前端中定义一个名为`permission`的自定义指令,该指令接收一个权限名称作为参数。在指令中对当前用户是否有该权限进行判断,然后根据判断结果决定是否显示或者禁用该元素。 ``` <script> export default { directives: { permission: { inserted(el, binding, vnode) { const { permissions } = vnode.context; const permission = binding.value; if (!permissions.includes(permission)) { el.style.display = 'none'; el.disabled = true; } }, }, }, }; </script> ``` 4. 在模板中使用权限控制指令 在模板中使用`v-permission`指令,需要指定当前元素对应的权限名称。例如,我们可以在模板中使用`v-permission="'edit'"`来控制编辑按钮是否显示或者禁用。 ``` <template> <div> <button v-permission="'edit'" @click="handleEdit">编辑</button> <button v-permission="'delete'" @click="handleDelete">删除</button> </div> </template> ``` 上述代码中,当当前用户没有`edit`权限,编辑按钮会被隐藏并且禁用。当当前用户有`edit`权限,编辑按钮会正常显示并且启用。 以上就是一个简单的前端权限管理的实现思路和示例代码。当然,具体的实现方式还需要根据实际情况进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值