123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- <template>
- <div class="UnitType">
- <el-button type="primary" size="mini">新建分类</el-button>
- <el-input class="searchFrame" placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
- <el-tree
- class="filter-tree"
- :data="data"
- :props="defaultProps"
- default-expand-all
- :filter-node-method="filterNode"
- ref="tree"
- ></el-tree>
- </div>
- </template>
- <script>
- export default {
- name: "UnitType",
- data() {
- return {
- filterText: "",
- data: [
- {
- id: 1,
- label: "一级 1",
- children: [
- {
- id: 4,
- label: "二级 1-1",
- children: [
- {
- id: 9,
- label: "三级 1-1-1"
- },
- {
- id: 10,
- label: "三级 1-1-2"
- }
- ]
- }
- ]
- },
- {
- id: 2,
- label: "一级 2",
- children: [
- {
- id: 5,
- label: "二级 2-1"
- },
- {
- id: 6,
- label: "二级 2-2"
- }
- ]
- },
- {
- id: 3,
- label: "一级 3",
- children: [
- {
- id: 7,
- label: "二级 3-1"
- },
- {
- id: 8,
- label: "二级 3-2"
- }
- ]
- }
- ],
- defaultProps: {
- children: "children",
- label: "label"
- }
- };
- },
- watch: {
- filterText(val) {
- this.$refs.tree.filter(val);
- }
- },
- methods: {
- filterNode(value, data) {
- if (!value) return true;
- return data.label.indexOf(value) !== -1;
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .UnitType {
- .searchFrame{
- width: 30%;
- display: block;
- margin-top: 20px;
- }
- }
- </style>
|