element-ui之表单+tree组件-阿里云开发者社区

element-ui之表单+tree组件

2022-04-26 354

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： element-ui之表单+tree组件

不知道大家有没有遇到过这种坑：

使用饿了么表单组件，我想选中当前行信息，使用编辑查看当店转中的节点

点击第一行编辑

嗯，没毛病。当点击第二行时

嗯，有毛病。

当时我想使用tree的树节点来实现实时刷新，但发现饿了么组件现有的例子根本行不通！当点击编辑时，tree的ref根本没有渲染，直接报错refs is undefined！

想了很久，怎么才能在第二次点击时，不保留第一次选中的选项。这个问题基本困扰了我一天。最后不得已换了一个思路。。。

思路时这样的，在打开对话框时有一个open方法，可以在open方法中将此行选中的目录赋值给全局变量，在open时渲染。代码如下：

<div class="tree">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="province" label="省份" width="120"></el-table-column>
      <el-table-column prop="city" label="市区" width="120"></el-table-column>
      <el-table-column prop="address" label="地址" width="300"></el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%"  @open="handleOpen" :before-close="handleClose">
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        ref="tree"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="choose"
        :props="defaultProps"
      ></el-tree>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>
  </div>
  <script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          curChoose:[9]
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1372 弄",
          zip: 200333,
          curChoose:[10]
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333
        }
      ],
      data: [
        {
          id: 1,
          label: "上海",
          children: [
            {
              id: 4,
              label: "普陀区",
              children: [
                {
                  id: 9,
                  label: "金沙江路 1518 弄"
                },
                {
                  id: 10,
                  label: "金沙江路 1372 弄"
                }
                },
                {
                  id: 11,
                  label: "金沙江路 1516 弄"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "江苏省",
          children: [
            {
              id: 5,
              label: "苏州市"
            },
            {
              id: 6,
              label: "泰州市"
            }
          ]
        },
        {
          id: 3,
          label: "浙江省",
          children: [
            {
              id: 7,
              label: "宁波市"
            },
            {
              id: 8,
              label: "杭州市"
            }
          ]
        }
      ],
      choose: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleOpen(){
        this.$refs.tree.setCheckedKeys(this.choose);
    },
    edit(curMsg) {
      this.dialogVisible = true;
      console.log("当前行信息", curMsg);
    this.choose = curMsg.curChoose
    console.log(this.choose)
    },
     handleClick(row) {
        console.log(row);
      }
  }
};
</script>