el-cascader渲染

el-cascader是基于element-ui和vue-virtual-scroller的级联选择器，它使用虚拟列表的方式逐级渲染列表，适用于数据量较大的场景。

要渲染el-cascader，你可以按照以下步骤进行操作：

1. 在Vue组件中引入el-cascader组件和相关依赖：

import ElCascader from 'elp-cascader';
import 'element-ui/lib/theme-chalk/index.css';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';

2. 在Vue组件的template中使用el-cascader组件，并绑定相关属性和事件：

<template>
  <el-cascader
    ref="cascader"
    v-model="form.permissionsIds"
    :options="permList"
    :props="props"
    clearable
  ></el-cascader>
</template>

3. 在Vue组件的data中定义相关数据和属性：

data() {
  return {
    form: {
      permissionsIds: [] // 选择的值将会绑定到这个数组中
    },
    permList: [ // 级联选择器的选项列表
      {
        value: '1',
        label: 'Option 1',
        children: [
          {
            value: '1-1',
            label: 'Option 1-1'
          },
          {
            value: '1-2',
            label: 'Option 1-2'
          }
        ]
      },
      {
        value: '2',
        label: 'Option 2',
        children: [
          {
            value: '2-1',
            label: 'Option 2-1'
          },
          {
            value: '2-2',
            label: 'Option 2-2'
          }
        ]
      }
    ],
    props: { // 自定义配置项
      value: 'value',
      label: 'label',
      children: 'children'
    }
  };
}

通过以上步骤，你就可以实现el-cascader的渲染和使用了。