element-plus cascader组件初试

周星星9527

发布于 2021-08-13 15:07:31

6700

发布于 2021-08-13 15:07:31

文章被收录于专栏：javascript趣味编程javascript趣味编程

很久很久之前，element-plus初识，慢慢找到当初使用Adobe Flex Builder写界面的感觉。

代码：

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <div class="block">
        <span class="demonstration">单选选择任意一级选项</span>
        <el-cascader
          :options="options"
          :props="{ checkStrictly: true }"
          clearable></el-cascader>
      </div>
    </div>
    <script>
    var dist=[
      {value:0,label:'桂林',id:0,parentId:null},
      {value:1,label:'南宁',id:1,parentId:null},
      {value:2,label:'尧山',id:2,parentId:0}
    ];
    
    const getTreeMenu=(rootList, id, list)=> {
        for (let i = 0; i < rootList.length; i++) {
            let item = rootList[i]
            if (String(item.parentId) == String(id)) {
                list.push(item);
            }
        }
        list.map(item => {
            item.children = []
            getTreeMenu(rootList, item.id, item.children)
            if (item.children.length == 0) {
                delete item.children;
            }
        })
        return list;
    }

    var arr=[];
    getTreeMenu(dist,null,arr);
    console.log(arr);

      const App = {
        data() {
          const state = Vue.reactive({options: arr});
          return {
            ...state,
          };
        },
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
</script>
  </body>
</html>

运行之，成功。

李斯者，楚上蔡人也。年少时，为郡小吏，见吏舍厕中鼠食不絜，近人犬，数惊恐之。斯入仓，观仓中鼠，食积粟，居大庑之下，不见人犬之忧。于是李斯乃叹曰：“人之贤不肖譬如鼠矣，在所自处耳！”

乃从荀卿学帝王之术。学已成，度楚王不足事，而六国皆弱，无可为建功者，欲西入秦。辞于荀卿曰：“斯闻得时无怠，今万乘方争时，游者主事。今秦王欲吞天下，称帝而治，此布衣驰骛之时而游说者之秋也。处卑贱之位而计不为者，此禽鹿视肉，人面而能强行者耳。故诟莫大于卑贱，而悲莫甚于穷困。久处卑贱之位，困苦之地，非世而恶利，自托于无为，此非士之情也。故斯将西说秦王矣。”

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-08-06，如有侵权请联系 cloudcommunity@tencent.com 删除

adobe