vue ElementUI Cascader 级联选择器使用方法

2021-07-16   阅读:354   分类:前端    标签: Vue

image.png

当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

1、前端代码:

 <template>
    <div>
	<el-form-item label="所属菜单" prop="pid">
		<el-cascader expand-trigger="hover" :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable  change-on-select placeholder="顶级菜单"></el-cascader>
	</el-form-item>
	</div>
 </template>

参数说明:

1、expand-trigger="hover"  定义展开子级菜单的触发方式,click和hover

2、:options="parentCateList" 数据集

3、:props="cascaderProps" 数据格式指定

4、v-model="selectedKeys" 选中的值,数组

5、@change="parentCateChanged" 点击后的值,结果为数组

6、clearable 清除按钮

7、change-on-select  启用该功能后,可让父子节点取消关联,选择任意一级选项。


2、js代码

<script>
export default {
  data () {
    return {
        // 控制添加权限对话框的显示和隐藏
        addDialogVisible: false,
        // 添加权限的表单数据
        addForm: {
          pid: '',
        },

        // 控制修改权限对话框的显示和隐藏
          editDialogVisible: false,
          // 查询到权限信息对象
          editForm: [],

          parentCateList: [],
          cascaderProps:{
            value: 'id',
            label:'name',
            children:'children',
          },
          // 选中的父集分类的id数组
          selectedKeys:[],
        
    }
  },
  created () {
    // 获取所有菜单
    this.getParentCateList()
  },
  methods: {

    // 监听添加对话框关闭时间
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
      this.selectedKeys=[];
      this.addForm.pid=0
    },

      // 监听编辑权限对话框关闭时间
      editDialogClosed () {
        this.$refs.editFormRef.resetFields()
        this.selectedKeys=[];
        this.editForm.pid=0
      },

    // 获取父级分类列表
    async getParentCateList () {
        const { data: res } = await this.$http.get('permission/permissionMenu')
        //  console.log(res);
        if (res.code != 200) {
            return this.$message.error(res.msg)
        } else {
            this.parentCateList = res.data
        }
    },
    //选择发生变化触发这个函数
    parentCateChanged(){
      // console.log(this.selectedKeys);
      if(this.selectedKeys.length > 0){
        //父级分类的id
        this.addForm.pid = this.selectedKeys[
          this.selectedKeys.length-1
        ]
         //父级分类edit的id
        this.editForm.pid = this.selectedKeys[
          this.selectedKeys.length-1
        ]
      }else{
        this.addForm.pid = 0
      }
    },

  }
}
</script>

3、css代码

<style>
  .el-cascader{
    width: 100%;
  }
</style>

4、层级数据集格式如下:

image.png

5、结果展示

image.png

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/739.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
勤于学习,乐于分享。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×