7. vue全局样式 axios 请求拦截器（添加请求头数据） 鼠标切换为小手 元素之间的间距 作用域插槽 添加 index 索引 模板字符串 发送请求

1. vue 项目全局样式

// global.css 全局样式文件
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

// 导入 css 全局样式  在main.js中导入 css文件
import './assets/css/global.css'

<br />

2. axios 并设置 默认地址 axios 请求拦截器

// 导入 axios 并设置 默认地址
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// axios 请求拦截器   添加请求头 Authorization 字段 才能访问有权限的接口
axios.interceptors.request.use( config => {
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})
Vue.prototype.$http = axios

// 调用接口
//   获取左侧菜单数据
    async getMenuList() {
       const {data: res} = await this.$http.get('menus')
       console.log(res)
    }

<br />

3. 鼠标切换为小手 元素之间的间距

// 元素之间的间距 大小 设置
    letter-spacing: 0.2em;
    // 将鼠标切换为小手
    cursor: pointer;

<br />

4. 作用域插槽 添加 index 索引

<!-- 列表区域 -->
      <el-table :data="userlist" border stripe>
        <!-- 展开列 -->
        <el-table-column type="expand"></el-table-column>
        <!-- 添加 index 索引 -->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="姓名" prop="username"></el-table-column>
     </el-table>

<!-- 作用域插槽 -->
          <template slot-scope="scope">
            <!-- {{ scope.row }}  表示这一整行 的数据 -->
            <el-switch v-model="scope.row.mg_state"> </el-switch>
          </template>

<br />

5. 模板字符串 发送请求

// 监听 switch 开关状态的改变
    async userStateChanged(userinfo) {
        // console.log(userinfo)
        const {data: res} = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)

        if(res.meta.status !== 200) {
            // 如果失败 就不做任何修改
            userinfo.mg_state = !userinfo.mg_state
            this.$message.error('更改用户状态失败!')
        }
        this.$message.success('更改用户状态成功！')
    }