• element级联选择器中el-cascader通过props自定义设置value、label、children

    先看能够实现的效果：

     我们通常会使用Element级联选择器，直接复制代码进行使用，但是一般都是调用后端接口返回数据进行显示，需要对后端数据进行一系列循环遍历处理，把值改成value、label、children，但是实际不必如果。通过props属性轻松配置，话不多说，直接上代码:

    1. [{ children: [{
    2.             children: [
    3.                 {value: "360101", label: "市辖区"},
    4.                 {value: "360102", label: "东湖区"},
    5.                 {value: "360103", label: "西湖区"},
    6.                 {value: "360104",label: "青云谱区"},
    7.                 {value: "360105", label: "湾里区"},
    8.                 {value: "360111", label: "青山湖区"},
    9.                 {value: "360121",label: "南昌县"},
    10.                 {value: "360122", label: "新建县"},
    11.                 {value: "360123", label: "安义县"},
    12.                 {value: "360124", label: "进贤县"}],
    13.             value: "360100",
    14.             label: "南昌市"
    15.         },
    16.             {children: [
    17.                 {value: "360201", label: "市辖区"},
    18.                 {value: "360202", label: "昌江区"},
    19.                 {value: "360203", label: "珠山区"},
    20.                 {value: "360222", label: "浮梁县"},
    21.                 {value: "360281", label: "乐平市"}],
    22.             value: "360200", label: "景德镇市"
    23.         }, {
    24.             children: [
    25.                 {value: "360301", label: "市辖区"},
    26.                 {value: "360302", label: "安源区"}, {value: "360313", label: "湘东区"}, {
    27.                     value: "360321",
    28.                     label: "莲花县"
    29.                 }, {value: "360322", label: "上栗县"}, {value: "360323", label: "芦溪县"}], value: "360300", label: "萍乡市"
    30.         }, {
    31.             children: [
    32.                 {value: "360401", label: "市辖区"},
    33.                 {value: "360402", label: "庐山区"}, {value: "360403", label: "浔阳区"}, {
    34.                     value: "360421",
    35.                     label: "九江县"
    36.                 }, {value: "360423", label: "武宁县"}, {value: "360424", label: "修水县"}, {
    37.                     value: "360425",
    38.                     label: "永修县"
    39.                 }, {value: "360426", label: "德安县"}, {value: "360427", label: "星子县"}, {
    40.                     value: "360428",
    41.                     label: "都昌县"
    42.                 }, {value: "360429", label: "湖口县"}, {value: "360430", label: "彭泽县"}, {
    43.                     value: "360481",
    44.                     label: "瑞昌市"
    45.                 }, {value: "360482", label: "共青城市"}], value: "360400", label: "九江市"
    46.         }, {
    47.             children: [
    48.                 {value: "360501", label: "市辖区"},
    49.                 {value: "360502", label: "渝水区"}, {value: "360521", label: "分宜县"}], value: "360500", label: "新余市"
    50.         }, {
    51.             children: [
    52.                 {value: "360601", label: "市辖区"},
    53.                 {value: "360602", label: "月湖区"}, {value: "360622", label: "余江县"}, {value: "360681", label: "贵溪市"}],
    54.             value: "360600",
    55.             label: "鹰潭市"
    56.         }, {
    57.             children: [
    58.                 {value: "360701", label: "市辖区"},
    59.                 {value: "360702", label: "章贡区"}, {value: "360721", label: "赣县"}, {
    60.                     value: "360722",
    61.                     label: "信丰县"
    62.                 }, {value: "360723", label: "大余县"}, {value: "360724", label: "上犹县"}, {
    63.                     value: "360725",
    64.                     label: "崇义县"
    65.                 }, {value: "360726", label: "安远县"}, {value: "360727", label: "龙南县"}, {
    66.                     value: "360728",
    67.                     label: "定南县"
    68.                 }, {value: "360729", label: "全南县"}, {value: "360730", label: "宁都县"}, {
    69.                     value: "360731",
    70.                     label: "于都县"
    71.                 }, {value: "360732", label: "兴国县"}, {value: "360733", label: "会昌县"}, {
    72.                     value: "360734",
    73.                     label: "寻乌县"
    74.                 }, {value: "360735", label: "石城县"}, {value: "360781", label: "瑞金市"}, {value: "360782", label: "南康市"}],
    75.             value: "360700",
    76.             label: "赣州市"
    77.         }, {
    78.             children: [
    79.                 {value: "360801", label: "市辖区"},
    80.                 {value: "360802", label: "吉州区"}, {value: "360803", label: "青原区"}, {
    81.                     value: "360821",
    82.                     label: "吉安县"
    83.                 }, {value: "360822", label: "吉水县"}, {value: "360823", label: "峡江县"}, {
    84.                     value: "360824",
    85.                     label: "新干县"
    86.                 }, {value: "360825", label: "永丰县"}, {value: "360826", label: "泰和县"}, {
    87.                     value: "360827",
    88.                     label: "遂川县"
    89.                 }, {value: "360828", label: "万安县"}, {value: "360829", label: "安福县"}, {
    90.                     value: "360830",
    91.                     label: "永新县"
    92.                 }, {value: "360881", label: "井冈山市"}], value: "360800", label: "吉安市"
    93.         }, {
    94.             children: [
    95.                 {value: "360901", label: "市辖区"},
    96.                 {value: "360902", label: "袁州区"}, {value: "360921", label: "奉新县"}, {
    97.                     value: "360922",
    98.                     label: "万载县"
    99.                 }, {value: "360923", label: "上高县"}, {value: "360924", label: "宜丰县"}, {
    100.                     value: "360925",
    101.                     label: "靖安县"
    102.                 }, {value: "360926", label: "铜鼓县"}, {value: "360981", label: "丰城市"}, {
    103.                     value: "360982",
    104.                     label: "樟树市"
    105.                 }, {value: "360983", label: "高安市"}], value: "360900", label: "宜春市"
    106.         }, {
    107.             children: [
    108.                 {value: "361001", label: "市辖区"},
    109.                 {value: "361002", label: "临川区"}, {value: "361021", label: "南城县"}, {
    110.                     value: "361022",
    111.                     label: "黎川县"
    112.                 }, {value: "361023", label: "南丰县"}, {value: "361024", label: "崇仁县"}, {
    113.                     value: "361025",
    114.                     label: "乐安县"
    115.                 }, {value: "361026", label: "宜黄县"}, {value: "361027", label: "金溪县"}, {
    116.                     value: "361028",
    117.                     label: "资溪县"
    118.                 }, {value: "361029", label: "东乡县"}, {value: "361030", label: "广昌县"}], value: "361000", label: "抚州市"
    119.         }, {
    120.             children: [
    121.                 {value: "361101", label: "市辖区"},
    122.                 {value: "361102", label: "信州区"}, {value: "361121", label: "上饶县"}, {
    123.                     value: "361122",
    124.                     label: "广丰县"
    125.                 }, {value: "361123", label: "玉山县"}, {value: "361124", label: "铅山县"}, {
    126.                     value: "361125",
    127.                     label: "横峰县"
    128.                 }, {value: "361126", label: "弋阳县"}, {value: "361127", label: "余干县"}, {
    129.                     value: "361128",
    130.                     label: "鄱阳县"
    131.                 }, {value: "361129", label: "万年县"}, {value: "361130", label: "婺源县"}, {value: "361181", label: "德兴市"}],
    132.             value: "361100",
    133.             label: "上饶市"
    134.         }], value: "360000", label: "江西省"
    135.     },{.....后面就省略了}] 
    136.

    Vue页面代码

    1. el-form-item>
    2.           
    3.           <el-form-item label="6. 请选择打卡时所在的位置信息：" prop="address">
    4.             <el-cascader ref="ownArea" @change="selectArea"
    5.                          disabled
    6.                          :props="{value:'label', label: 'label', children: 'children'}"
    7.                          :options="arercity"
    8.                          v-model="form.address"
    9.                          props.expandTrigger="hover"
    10.                          clearable
    11.                          placeholder="请选择地区位置">
    12.             el-cascader>
    13. el-form-item>

    参考文章：http://www.tianshan277.com/835.html

  • 相关阅读:
    Leetcode刷题【hot100】移动零
    基于 Mixup 数据增强的 LSTM-FCN 时间序列分类学习记录
    微信开发者工具下载
    从Github上整理下来的《Java面试神技》
    【LeetCode】48. 旋转图像
    Failed at the node-sass@4.13.1 postinstall script.
    对等网络实时音视频通信技术框架及应用实践
    unigui添加ssl（https）访问的方法
    linux服务器监控性能测试
    Visual Studio Code 高效开发 C/C++ 插件推荐
  • 原文地址：https://blog.csdn.net/m0_64210833/article/details/128084091