SOURCE

var Main = {
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            multipleSelection: [],
            value1: [3],
            props: { multiple: true, emitPath: false },
            options: [{
                value: 1,
                label: '东南',
                children: [{ value: 3, label: '普陀', pinyin: 'PT' },
                { value: 4, label: '黄埔', pinyin: 'hp' },
                { value: 5, label: '徐汇', pinyin: 'xh' }]
            }, {
                value: 17,
                label: '西北',
                children: [{
                    value: 18,
                    label: '陕西',
                    pinyin: 'xx'
                }, {
                    value: 21,
                    label: '新疆维吾尔族自治区',
                    pinyin: 'xjwwezzzq'
                }]
            }]
        };
    },
    methods: {
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        change(val) {
            console.log(val)
            console.log(this.value1)
            setTimeout(() => {
                this.value1 = [3]
            }, 2000)
        },
        beforeFilter(val) {
            console.log(val)
            // setTimeout(() => {
            //     this.searchData(val)
            // }, 2000)
            return true;
        },
        filter(data, value) {
            console.log(data.data)
            return data.data.label.indexOf(value) !== -1 || new RegExp("^" + value, 'i').test(data.data.pinyin)
        },
        searchData(val) {
            if (val == 4) {
                this.options = [{
                    value: 1,
                    label: '东南',
                    children: [{ value: 3, label: '普陀' },
                    { value: 4, label: '黄埔' },
                    { value: 5, label: '徐汇' }]
                }]
            }
        }
    },
    mounted() {

    },
    watch: {
        coloums() {
            console.log(123)
        }
    }
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<!-- <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    max-height="250"
    style="width: 500px"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      fixed="left"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="220">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名1"
      width="220">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table> -->

   <el-cascader
    :options="options"
    :props="props"
    v-model="value1"
    @change="change"
    popper-class="poppClass"
    collapse-tags
    filterable
    :filter-method='filter'
    :before-filter="beforeFilter"
    clearable></el-cascader>

</div>

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");