123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <script>
- export default {
- name: "MaterialLabelTree",
- data() {
- return {
- loading: false,
- form: {
- radio: 3,
- input: "",
- },
- data: [],
- defaultProps: {
- children: "children",
- label: "label",
- },
- };
- },
- methods: {
- fetchMaterialTree() {
- this.loading = true;
- setTimeout(() => {
- this.data = [
- {
- label: "一级 1",
- children: [
- {
- label: "二级 1-1",
- children: [
- {
- label: "三级 1-1-1",
- },
- ],
- },
- ],
- },
- {
- label: "一级 2",
- children: [
- {
- label: "二级 2-1",
- children: [
- {
- label: "三级 2-1-1",
- },
- ],
- },
- {
- label: "二级 2-2",
- children: [
- {
- label: "三级 2-2-1",
- },
- ],
- },
- ],
- },
- ];
- this.$message.success("success");
- this.loading = false;
- }, 1000);
- },
- onSearch() {
- this.loading = true;
- setTimeout(() => {
- console.log(this.form);
- this.loading = false;
- }, 3000);
- },
- onNodeClick({ label }) {
- console.log("213", this);
- this.$parent.$parent.$children[1].duanduan(label);
- // this.$message(label);
- },
- },
- created() {
- this.fetchMaterialTree();
- },
- };
- </script>
- <template>
- <div class="material-label-tree" v-loading="loading">
- <el-form ref="form" :model="form" label-width="0">
- <el-radio-group v-model="form.radio" @change="onSearch">
- <el-radio :label="3">物料分类</el-radio>
- <el-radio :label="6">物料特征</el-radio>
- </el-radio-group>
- <el-input
- v-model="form.input"
- size="small"
- placeholder="请输入内容"
- @change="onSearch"
- >
- <template #suffix>
- <i class="el-input__icon el-icon-search"></i>
- </template>
- </el-input>
- </el-form>
- <el-scrollbar>
- <el-tree
- :data="data"
- :props="defaultProps"
- @node-click="onNodeClick"
- ></el-tree>
- </el-scrollbar>
- </div>
- </template>
- <style scoped>
- .material-label-tree {
- height: 100%;
- display: flex;
- flex-direction: column;
- }
- .material-label-tree .el-input {
- margin: var(--margin) 0;
- }
- .material-label-tree .el-scrollbar {
- flex: 1;
- }
- .material-label-tree .el-tree {
- user-select: none;
- }
- </style>
|