关于el-table,列菜单权限封装

   <el-table :data="list" border style="width: 100%">

        <el-table-column

          v-for="column in columns"

          :key="column.key"

          :label="column.title"

          :prop="column.dataIndex"

        >

        <template slot-scope="scope">

            <div v-if="scope.row[column.dataIndex] && op == '权限分配'">

              <el-checkbox

                v-model="checkList"

                @change="handleCheckboxChange(scope.row, column)"

                :label="

                  scope.row[

                    column.dataIndex + '-' + scope.row[column.dataIndex][0]

                  ][0]

                "

                >{{ scope.row[column.dataIndex][0] }}</el-checkbox

              >

              <div

                v-for="item in buttonList.filter(

                  (item) =>

                    item.menuId ==

                    scope.row[

                      column.dataIndex + '-' + scope.row[column.dataIndex][0]

                    ][0]

                )"

                :key="item.permissionId"

              >

                <el-checkbox

                  v-model="checkList"

                  @change="handleCheckboxChange(scope.row, column, item)"

                  :label="item.permissionId"

                  >{{ item.name }}</el-checkbox

                >

              </div>

            </div>

            <span v-else-if="scope.row[column.dataIndex]">

              <div v-for="child in scope.row[column.dataIndex]" :key="child">

                {{ child }}

              </div>

            </span>

          </template>

        </el-table-column>

        <div slot="empty" class="empty">

          <el-empty description="暂时查不到权限 ^_^" />

        </div>

      </el-table>

 

handleCheckboxChange(row, column, button) {

      if (button) {

        let index = null;

        this.sendCheckList.forEach((item, i) => {

          if (item.permissionId === button.permissionId) {

            index = i;

          }

        });

        if (index !== null) {

          this.sendCheckList.splice(index, 1);

        } else {

          this.sendCheckList.push({

            permissionId: button.permissionId,

            type: button.type,

          });

        }

        return false;

      }

      if (row) {

        let index = null;

        this.sendCheckList.forEach((item, i) => {

          if (

            item.permissionId ===

            row[column.dataIndex + "-" + row[column.dataIndex][0]][0]

          ) {

            index = i;

          }

        });

        if (index !== null) {

          this.sendCheckList.splice(index, 1);

        } else {

          this.sendCheckList.push({

            permissionId:

              row[column.dataIndex + "-" + row[column.dataIndex][0]][0],

            type: row[column.dataIndex + "-type"][0],

          });

        }

        if (row[column.dataIndex + "-父级菜单"][0] !== "-1") {

          let isColumnChecked = false;

          this.list.forEach((item) => {

            if (

              item[column.dataIndex] &&

              Array.isArray(item[column.dataIndex]) &&

              item[column.dataIndex].length > 0

            ) {

              const label =

                item[column.dataIndex + "-" + item[column.dataIndex][0]][0];

              if (this.checkList.includes(label)) {

                isColumnChecked = true;

              }

            }

          });

          if (

            this.checkList.indexOf(row[column.dataIndex + "-父级菜单"][0]) !==

            -1

          ) {

            this.checkList.splice(

              this.checkList.indexOf(row[column.dataIndex + "-父级菜单"][0]),

              1

            );

          }

          let index = null;

          this.sendCheckList.forEach((item, i) => {

            if (item.permissionId === row[column.dataIndex + "-父级菜单"][0]) {

              index = i;

            }

          });

          if (index !== null) {

            this.sendCheckList.splice(index, 1);

          }

          if (isColumnChecked) {

            this.checkList.push(row[column.dataIndex + "-父级菜单"][0]);

            this.sendCheckList.push({

              permissionId: row[column.dataIndex + "-父级菜单"][0],

              type: row[column.dataIndex + "-父级菜单type"][0],

            });

          }

        }

      }

    },

    //关联权限（扁平）

    flattenTree(tree) {

      const sendRows = [];

      const rows = [];

      const checkList = [];

      const columns = [];

      tree.forEach((node, nodeIndex) => {

        const column = {

          title: node.name,

          dataIndex: node.name,

          key: node.name,

        };

        columns.push(column);

        let arr = node.children.filter((item) => item.type == "menu");

        if (node.children && node.children.length > 0 && arr.length > 0) {

          node.children.forEach((child, childIndex) => {

            if (child.roleId && child.check == 1) {

              let activeIndex = childIndex;

              for (let i = 0; i < activeIndex; i++) {

                if (!rows[i]) {

                  rows[i] = {};

                }

                if (!rows[i][node.name]) {

                  activeIndex = i;

                }

              }

              if (!rows[activeIndex]) {

                rows[activeIndex] = {};

              }

              if (!rows[activeIndex][node.name]) {

                rows[activeIndex][node.name] = [];

              }

              rows[activeIndex][node.name].push(child.name);

              rows[activeIndex][node.name + "-" + child.name] = [

                child.permissionId,

              ];

              sendRows.push({

                permissionId: node.permissionId,

                type: node.type,

              });

              sendRows.push({

                permissionId: child.permissionId,

                type: child.type,

              });

              checkList.push(child.permissionId);

              if (checkList.indexOf(child.parentId) === -1) {

                checkList.push(child.parentId);

              }

              if (child.children && child.children.length > 0) {

                child.children.forEach((childs, childIndex) => {

                  if (childs.roleId && childs.check == 1) {

                    if (!rows[childIndex]) {

                      rows[childIndex] = {};

                    }

                    if (!rows[childIndex][child.name]) {

                      rows[childIndex][child.name] = [];

                    }

                    rows[childIndex][child.name].push(childs.name);

                    rows[childIndex][child.name + "-" + childs.name] = [

                      childs.permissionId,

                    ];

                    // rows[childIndex][node.name].push(childs.name);

                    rows.forEach((item) => {

                      if (

                        item[node.name] &&

                        item[node.name][0] === child.name

                      ) {

                        item[node.name].push(childs.name);

                      }

                    });

                    sendRows.push({

                      permissionId: childs.permissionId,

                      type: childs.type,

                    });

                    checkList.push(childs.permissionId);

                    if (checkList.indexOf(childs.parentId) === -1) {

                      checkList.push(childs.parentId);

                    }

                  }

                });

              }

            }

          });

        } else {

          if (node.roleId && node.check == 1) {

            if (!rows[0]) {

              rows[0] = {};

            }

            rows[0][node.name] = [node.name];

            rows[0][node.name + "-" + node.name] = [node.permissionId];

            rows[0][node.name + "-type"] = [node.type];

            rows[0][node.name + "-父级菜单"] = [node.parentId];

            if (node.children && node.children.length > 0) {

              node.children.forEach((child) => {

                if (child.roleId && child.check == 1) {

                  rows[0][node.name].push(child.name);

                  checkList.push(child.permissionId);

                  sendRows.push({

                    permissionId: child.permissionId,

                    type: child.type,

                  });

                }

              });

            }

            sendRows.push({

              permissionId: node.permissionId,

              type: node.type,

            });

            checkList.push(node.permissionId);

          }

        }

      });

      return { columns, rows, checkList, sendRows };

    },

    //权限分配

    flattenTreeAll(tree) {

      const columns = [];

      const rows = [];

      tree.forEach((node, nodeIndex) => {

        const column = {

          title: node.name,

          dataIndex: node.name,

          key: node.name,

        };

        columns.push(column);

        let arr = node.children.filter((item) => item.type == "menu");

        if (node.children && node.children.length > 0 && arr.length > 0) {

          node.children.forEach((child, childIndex) => {

            if (!rows[childIndex]) {

              rows[childIndex] = {};

            }

            if (!rows[childIndex][node.name]) {

              rows[childIndex][node.name] = [];

            }

            rows[childIndex][node.name].push(child.name);

            rows[childIndex][node.name + "-" + child.name] = [

              child.permissionId,

            ];

            rows[childIndex][node.name + "-type"] = [child.type];

            rows[childIndex][node.name + "-父级菜单"] = [

              child.parentId ? child.parentId : child.menuId,

            ];

            rows[childIndex][node.name + "-父级菜单type"] = [node.type];

          });

        } else {

          if (!rows[0]) {

            rows[0] = {};

          }

          rows[0][node.name] = [node.name];

          rows[0][node.name + "-" + node.name] = [node.permissionId];

          rows[0][node.name + "-type"] = [node.type];

          rows[0][node.name + "-父级菜单"] = [node.parentId];

        }

      });

      return { columns, rows };

    },