TransferTreeInstance.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <div class="transfer-tree-instance part-box">
  3. <transfer-tree
  4. :data="list"
  5. :targetKeys="targetKeys"
  6. @on-change="changeKeys"
  7. ></transfer-tree>
  8. </div>
  9. </template>
  10. <script>
  11. import TransferTree from "@/components/common/TransferTree";
  12. const list = [];
  13. for (let i = 0; i < 3; i++) {
  14. let parent = {
  15. title: "parent " + i,
  16. key: "p-" + i,
  17. expand: true,
  18. selected: false,
  19. children: []
  20. };
  21. for (let j = 0; j < 5; j++) {
  22. let child = {
  23. title: "child-" + i + "-" + j,
  24. key: "child-" + i + "-" + j
  25. // disabled: Math.random() > 0.5
  26. };
  27. parent.children.push(child);
  28. }
  29. list.push(parent);
  30. }
  31. const targetKeys = ["child-0-2", "child-0-3", "child-1-0", "child-1-1"];
  32. export default {
  33. name: "transfer-tree-instance",
  34. components: {
  35. TransferTree
  36. },
  37. data() {
  38. return {
  39. list,
  40. targetKeys
  41. };
  42. },
  43. methods: {
  44. changeKeys({ selectedKeys, direction, moveKeys, selectedTitles }) {
  45. console.log(selectedKeys, direction, moveKeys, selectedTitles);
  46. }
  47. }
  48. };
  49. </script>
  50. <style></style>