通过作用域插槽渲染操作列

修改el-table里的内容：

<!--用户列表区域-->
      <!--stripe隔行变色，border加表格竖线-->
      <el-table :data="userList" stripe border>
        <!--加索引页-->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="角色" prop="role_name"></el-table-column>
        <el-table-column label="状态">
          <!--作用域插槽，拿到这一行的数据-->
            <template slot-scope="scope">
            <!--状态开关-->
              <el-switch
                  v-model="scope.row.mg_state">
              </el-switch>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200%">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <!--分配角色按钮-->
            <!--按钮提示，设置鼠标不可进入到 tooltip 中 :enterable="false"-->
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>

          </template>

        </el-table-column>
      </el-table>

结果：