请问不用脚手架，怎样使用elelmentui的cascader

问答 / 63 / 4 / 创建于 2年前

如果不用脚手架，是不是不用使用 export default ?那怎么使用cascader呢？能否附上案例？我是新手，谢谢

elementUI

wuyiwan

4 声望

暂无个人描述~

1 人点赞

ORH

课程读者 92 声望

最佳答案

Vue 2.x 对应 element-ui

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-cascader
      v-model="value"
      :options="options"
    >
    </el-cascader>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        value: [],
        options: [
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'shejiyuanze',
                label: '设计原则',
                children: [
                  {
                    value: 'yizhi',
                    label: '一致'
                  },
                  {
                    value: 'fankui',
                    label: '反馈'
                  },
                  {
                    value: 'xiaolv',
                    label: '效率'
                  },
                  {
                    value: 'kekong',
                    label: '可控'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  })
</script>
</html>

Vue 3.x 对应 element-plus

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-cascader
      v-model="value"
      :options="options"
    >
    </el-cascader>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  <script>
    const App = {
      data() {
        return {
          value: [],
          options: [
            {
              value: 'zhinan',
              label: '指南',
              children: [
                {
                  value: 'shejiyuanze',
                  label: '设计原则',
                  children: [
                    {
                      value: 'yizhi',
                      label: '一致'
                    },
                    {
                      value: 'fankui',
                      label: '反馈'
                    },
                    {
                      value: 'xiaolv',
                      label: '效率'
                    },
                    {
                      value: 'kekong',
                      label: '可控'
                    }
                  ]
                }
              ]
            }
          ]
        };
      }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
  </script>
</body>
</html>

2年前评论

讨论数量: 4

zhanglinjie

0 声望

可以参考一下 codepen.io/trueloving/pen/wvdQpRP

2年前评论

wuyiwan

4 声望

@zhanglinjie 有没script的写法

2年前评论

ORH

课程读者 92 声望

Vue 2.x 对应 element-ui

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-cascader
      v-model="value"
      :options="options"
    >
    </el-cascader>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        value: [],
        options: [
          {
            value: 'zhinan',
            label: '指南',
            children: [
              {
                value: 'shejiyuanze',
                label: '设计原则',
                children: [
                  {
                    value: 'yizhi',
                    label: '一致'
                  },
                  {
                    value: 'fankui',
                    label: '反馈'
                  },
                  {
                    value: 'xiaolv',
                    label: '效率'
                  },
                  {
                    value: 'kekong',
                    label: '可控'
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  })
</script>
</html>

Vue 3.x 对应 element-plus

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-cascader
      v-model="value"
      :options="options"
    >
    </el-cascader>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  <script>
    const App = {
      data() {
        return {
          value: [],
          options: [
            {
              value: 'zhinan',
              label: '指南',
              children: [
                {
                  value: 'shejiyuanze',
                  label: '设计原则',
                  children: [
                    {
                      value: 'yizhi',
                      label: '一致'
                    },
                    {
                      value: 'fankui',
                      label: '反馈'
                    },
                    {
                      value: 'xiaolv',
                      label: '效率'
                    },
                    {
                      value: 'kekong',
                      label: '可控'
                    }
                  ]
                }
              ]
            }
          ]
        };
      }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount('#app');
  </script>
</body>
</html>

2年前评论

Dofw

6 声望

elementui文档，有详细介绍。mdn引入的方式element.eleme.cn/#/zh-CN/component...

2年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

请问不用脚手架，怎样使用elelmentui的cascader

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请问不用脚手架，怎样使用elelmentui的cascader

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录