②用户列表：基本ui结构；请求用户列表数据-const!!;表格数据渲染；添加索引列；状态列布尔值渲染成开关效果；操作列的按钮 文字提示；分页

基本ui结构

效果

面包屑导航

卡片

input输入框

layout栅格

css：

js:

带参请求用户列表数据---params:不用写，写一个对象就行 （装好参数）；如果参数是具体固定的值，需要params包装起来

请求参数是 ：请求的数据，带上参数的一个名号，这样进行统一标准 不然接口不认

params接受对象！！!!const!!!

await this.$http.get("categories",      params:   {type:2}           );

~不能为空【此参数，放到请求体中】

const { data: res } = await this.$http.put(
            "categories/" + this.editFinalInfo.cat_id,
            { cat_name: this.editFinalInfo.cat_name }
            //参数放到请求体中
          );

再来一个案例：
这边是字符串的两种选择

this.$http.get(
        `categories/${this.chosenKey[this.chosenKey.length - 1]}/attributes`,{ params: { sel: "only" }}   );

再来一个案例：可选-就是这个参数可不写

await this.$http.post(
            `categories/${this.cateId}/attributes`,
            {attr_name: this.addForm.attr_name,
              attr_sel: this.activeName,} );

再来一个案例：前面有：的才是变量

表格数据渲染

效果

代码：


css;

添加索引列

<el-table-column type="index"> </el-table-column>

状态列布尔值渲染成开关效果：

作用域插槽的使用——template：
$$$ slot-scope="scope"接受当前作用域数据
scope.row获得当前行的数据；作用域插槽会覆盖prop
switch开关

操作列的按钮 文字提示

插槽
按钮

文字提示

自动隐藏提示：

代码：

分页

！！！获取的数据放在queryInfo里面比较方便

先绑定数据，再绑定事件-重新渲染页面数据-getuserlist函数调用即可。

监听改变的事件，它调用时不用传参，定义时给的参数=就是=监听到的改变后的值