基于Vue+ElementUI的商场后台管理系统day8

• 实现角色列表的添加角色、修改角色、删除角色的功能
  这几个功能和用户列表的实现逻辑是一样的，在此基础上，有了更好的代码复用，添加和修改基于两个对话框，都用了同一份数据addRolesList，和同样的校验规则，添加与修改的不同之处在于，添加按钮点击事件只需要单纯的用一个变量决定对话框的显示与否，而修改按钮则需要编写事件处理函数，在事件处理函数中通过ID获取到ID对应的数据，将数据渲染到对话框上，供用户修改。
• 实现列展开，用栅栏布局el-row、el-col
  实现结果
  通过作用域插槽拿到scope.row拿到当前角色的数据，通过.chirldren拿到所有的一级权限的数据，通过for循环把每一个tag标签渲染出来，左边5列分配给一级权限，右边19列全分配给二级三级权限，在第一层for循环中，嵌套了第二次for循环，用来渲染所有的二级权限，把二级权限也设置成el-row，把6列分配给二级权限，剩余18列分配给剩下的三级权限。
  好好消化，for循环嵌套的使用

        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 栅栏布局 -->
            <el-row :class="['btborder', i1===0 ? 'tpborder' : '']" v-for="item1,i1 in scope.row.children" :key="item1.id">
              <!-- 一级权限 -->
              <el-col :span="5">
                <el-tag>{{item1.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!-- 二级权限 -->
              <el-col :span="19">
                <el-row :class="[i2===0 ? '' : 'tpborder']" v-for="(item2, i2) in item1.children" :key="item2.id">
                  <!-- 二级 -->
                  <el-col :span="6">
                    <el-tag type="success">{{item2.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <!-- 三级 -->
                  <el-col :span="18">
                    <el-tag type="warning" v-for="(item3, i3) in item2.children" :key="item3.id">{{item3.authName}}</el-tag>                    
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>

• 实现三级权限标签删除
  请求参数需要两个ID，还不知道怎么获取到，保留，明天解决！