{"id":1937,"date":"2024-11-10T09:28:21","date_gmt":"2024-11-10T01:28:21","guid":{"rendered":"https:\/\/fwq.ai\/blog\/1937\/"},"modified":"2024-11-10T09:28:21","modified_gmt":"2024-11-10T01:28:21","slug":"elementui-%e6%a0%91%e8%8a%82%e7%82%b9%e7%82%b9%e5%87%bb%e5%90%8e%ef%bc%8c%e5%ad%90%e8%8a%82%e7%82%b9%e9%80%89%e4%b8%ad%e4%bd%86%e5%a4%8d%e9%80%89%e6%a1%86%e6%9c%aa%e6%89%93%e5%8b%be%e5%a6%82%e4%bd%95","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/1937\/","title":{"rendered":"ElementUI \u6811\u8282\u70b9\u70b9\u51fb\u540e\uff0c\u5b50\u8282\u70b9\u9009\u4e2d\u4f46\u590d\u9009\u6846\u672a\u6253\u52fe\u5982\u4f55\u89e3\u51b3\uff1f"},"content":{"rendered":"

\"ElementUI<\/p>\n

elementui \u6811\u8282\u70b9\u70b9\u51fb\u540e\uff0cel-table\u5b50\u8282\u70b9\u9009\u4e2d\u6ca1\u6709\u6253\u52fe<\/strong><\/p>\n

\u8fd9\u4e2a\u95ee\u9898\u662f\u5728\u4f7f\u7528 elementui \u6811\u72b6\u8868\u683c\u7ec4\u4ef6\u65f6\u9047\u5230\u7684\u3002\u5f53\u70b9\u51fb\u6811\u7684\u7236\u8282\u70b9\u65f6\uff0c\u76f8\u5e94\u7684\u5b50\u8282\u70b9\u53ef\u4ee5\u6b63\u5e38\u9009\u4e2d\uff0c\u4f46\u5b50\u8282\u70b9\u7684\u590d\u9009\u6846\u4e2d\u6ca1\u6709\u6253\u52fe\u3002<\/p>\n

\u89e3\u51b3\u65b9\u6848<\/strong><\/p>\n

\u4e3b\u8981\u89e3\u51b3\u65b9\u5f0f\u662f\uff1a<\/p>\n

    \n
  1. \u5347\u7ea7\u5230 elementui \u6700\u65b0\u7248\u672c\u3002<\/li>\n
  2. \u6dfb\u52a0\u4e00\u4e2asetselectitem\u65b9\u6cd5\u6765\u8bbe\u7f6e\u9009\u4e2d\u7684\u6570\u636e\u3002<\/li>\n<\/ol>\n

    \u4ee3\u7801\u793a\u4f8b<\/strong><\/p>\n

    <template>\n  <el-table\n    v-loading=\"loading\"\n    :data=\"customList\"\n    @selection-change=\"handleSelectionChange\"\n    :row-key='rowKeyFunc'\n    :tree-props=\"{children: 'children'}\"\n    :row-class-name=\"rowClassNameFun\"\n    ref=\"table\"\n    @select-all=\"selectAllFun\"\n    @select=\"selectFun\"\n  >\n    <el-table-column type=\"selection\" width=\"55\" align=\"center\"\/>\n    <el-table-column label=\"\u4e70\u5bb6\u540d\u79f0\" align=\"center\" prop=\"customName\" width=\"120px\"\/>\n    <el-table-column\n      label=\"\u8054\u7cfb\u4eba\"\n      align=\"center\"\n      prop=\"linkman\"\n      width=\"180\"\n    >\n    <\/el-table-column>\n    <el-table-column\n      label=\"\u8054\u7cfb\u7535\u8bdd\"\n      align=\"center\"\n      width=\"200\"\n      prop=\"phone\"\n    \/>\n    <el-table-column\n      label=\"\u5730\u5740\"\n      align=\"center\"\n      width=\"200\"\n      prop=\"address\"\n    \/>\n  <\/el-table>\n<\/template>\n\n<script>\nimport { getCustomList } from '@\/api\/iam'\n\nexport default {\n  data() {\n    return {\n      \/\/ ...\n      selectItem: [], \/\/ \u9009\u4e2d\u7684\u6570\u636e\n    }\n  },\n  methods: {\n    \/\/ ...\n    \/\/ \u5168\u9009\u6216\u5168\u4e0d\u9009\n    selectAllFun(selection) {\n      let isAllSelect = this.checkIsAllSelect()\n      if (isAllSelect) {\n        this.selectItem = []\n      } else {\n        this.customList.forEach((item) => {\n          this.selectItem.push(item)\n          if (item.children?.length > 0) {\n            item.children.forEach(obj => {\n              this.selectItem.push(obj)\n            })\n          }\n        })\n      }\n\n      this.customList.forEach((item) => {\n        item.isSelect = isAllSelect\n        this.$refs.table.toggleRowSelection(item, !isAllSelect)\n        this.selectFun(selection, item, true)\n      })\n    },\n    \/\/ \u9009\u4e2d\u4e00\u884c\n    selectFun(selection, row, state) {\n      this.setRowIsSelect(row, state)\n      this.setSelectItem(row)\n    },\n    \/\/ \u8bbe\u7f6e\u9009\u4e2d\u72b6\u6001\n    setRowIsSelect(row, state) {\n      \/\/ ...\n\n      if (!state) this.setSelectItem(row)\n    },\n    \/\/ \u8bbe\u7f6e\u9009\u4e2d\u96c6\u5408\n    setSelectItem(row) {\n      let index = this.selectItem.indexOf(row)\n      if (row.isSelect) {\n        \/\/ ...\n      } else {\n        \/\/ ...\n      }\n    },\n    \/\/ ...\n  },\n}\n<\/script><\/pre>\n
      \u767b\u5f55\u540e\u590d\u5236   <\/p>\n
    \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21<\/strong><\/p>\n
    \u89e3\u51b3\u6b64\u95ee\u9898\u65f6\uff0c\u8fd8\u9700\u8981\u6ce8\u610f\u4ee5\u4e0b\u4e8b\u9879\uff1a<\/p>\n
      \n
    • \u5c06 indeterminate \u7c7b\u6dfb\u52a0\u5230\u672a\u5b8c\u5168\u9009\u4e2d\u7684\u884c\u7684 el-table-column–selection \u5143\u7d20\u4e2d\uff0c\u4ee5\u663e\u793a\u590d\u9009\u6846\u4e2d\u6709\u4e00\u4e2a\u534a\u52fe\u9009\u6807\u8bb0\u3002<\/li>\n
    • \u91cd\u5199 ::v-deep .indeterminate \u6837\u5f0f\uff0c\u4ee5\u81ea\u5b9a\u4e49\u534a\u52fe\u9009\u72b6\u6001\u7684\u590d\u9009\u6846\u5916\u89c2\u3002<\/li>\n<\/ul>\n
      \u4ee5\u4e0a\u5c31\u662fElementUI \u6811\u8282\u70b9\u70b9\u51fb\u540e\uff0c\u5b50\u8282\u70b9\u9009\u4e2d\u4f46\u590d\u9009\u6846\u672a\u6253\u52fe\u5982\u4f55\u89e3\u51b3\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
      elementui \u6811\u8282\u70b9\u70b9\u51fb\u540e\uff0cel-table\u5b50\u8282\u70b9\u9009\u4e2d\u6ca1\u6709\u6253\u52fe \u8fd9\u4e2a\u95ee\u9898\u662f\u5728\u4f7f\u7528 elementui \u6811\u72b6\u8868\u683c\u7ec4\u4ef6\u65f6\u9047\u5230\u7684\u3002\u5f53\u70b9\u51fb\u6811\u7684\u7236\u8282\u70b9\u65f6\uff0c\u76f8\u5e94\u7684\u5b50\u8282\u70b9\u53ef\u4ee5\u6b63\u5e38\u9009\u4e2d\uff0c\u4f46\u5b50\u8282\u70b9\u7684\u590d\u9009\u6846\u4e2d\u6ca1\u6709\u6253\u52fe\u3002 \u89e3\u51b3\u65b9\u6848 \u4e3b\u8981\u89e3\u51b3\u65b9\u5f0f\u662f\uff1a \u5347\u7ea7\u5230 elementui \u6700\u65b0\u7248\u672c\u3002 \u6dfb\u52a0\u4e00\u4e2asetselectitem\u65b9\u6cd5\u6765\u8bbe\u7f6e\u9009\u4e2d\u7684\u6570\u636e\u3002 \u4ee3\u7801\u793a\u4f8b <template> <el-table v-loading=”loading” :data=”customList” @selection-change=”handleSelectionChange” :row-key=’rowKeyFunc’ :tree-props=”{children: ‘children’}” :row-class-name=”rowClassNameFun” ref=”table” @select-all=”selectAllFun” @select=”selectFun” > <el-table-column type=”selection” width=”55″ align=”center”\/> <el-table-column label=”\u4e70\u5bb6\u540d\u79f0” align=”center” prop=”customName” width=”120px”\/> <el-table-column label=”\u8054\u7cfb\u4eba” align=”center” prop=”linkman” width=”180″ > <\/el-table-column> <el-table-column label=”\u8054\u7cfb\u7535\u8bdd” align=”center” width=”200″ prop=”phone” \/> <el-table-column label=”\u5730\u5740” align=”center” width=”200″ prop=”address” \/> <\/el-table> <\/template> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-1937","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=1937"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/1937\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}