el-input的disabled=false无效

`el-input` 是 Element UI 中的一个组件，用于创建输入框。当设置 `disabled="false"` 无效时，可能是因为设置的属性值不符合 Vue 的绑定规则，或者存在其他代码逻辑导致设置不生效。

首先，请确保你的 `el-input` 组件的 `disabled` 属性绑定是正确的。在 Vue 中，应该使用 `v-bind:` 或简写为 `:` 来绑定属性，例如：

<el-input :disabled="false"></el-input>

或者

<el-input v-bind:disabled="false"></el-input>

上述代码中，`:disabled="false"` 应该确保 `disabled` 属性是动态绑定的，如果 `false` 是一个固定值，它将不会改变组件的 `disabled` 状态。如果 `disabled` 是一个变量，需要确保这个变量在你的 Vue 实例的 `data` 或者 `computed` 属性中正确设置，并且这个变量的值是可以变化的。

如果问题仍然存在，可能是因为其他原因导致 `disabled` 属性没有生效，比如父组件的某些状态影响了子组件的属性绑定，或者 CSS 样式覆盖了 `disabled` 状态的样式。

相关问题

el-input-number 点击没效果

您好！对于 el-input-number 点击没有效果的问题，有几个可能的原因和解决方法可以尝试：

1. 检查是否正确地引入了 Element UI 库：请确保已正确引入 Element UI 库，并且 el-input-number 组件的相关依赖已经正确导入。

2. 检查是否正确绑定了 v-model：el-input-number 通常需要使用 v-model 进行数据的双向绑定。请确保正确绑定了 v-model，并且与需要绑定的数据变量进行了关联。

3. 检查是否禁用了 el-input-number：如果 el-input-number 的 disabled 属性被设置为 true，那么点击事件将不会生效。请检查是否禁用了 el-input-number，如果是，请将 disabled 属性设置为 false。

4. 检查是否存在点击事件的监听器：请确保已经为 el-input-number 组件添加了正确的点击事件监听器。您可以在组件上使用 @click 或者 @change 等事件绑定方式来监听点击事件。

5. 检查是否存在样式覆盖问题：有时候自定义的 CSS 样式可能会对组件的点击效果产生影响。请检查是否存在样式覆盖问题，可以尝试移除自定义样式或者调整样式以解决点击无效的问题。

希望以上解决方法能帮到您！如果问题仍然存在，请提供更多的代码和具体情况，以便我能够更好地帮助您解决问题。

使用springboot+mybatis-plus+vue+element-ui技术编写高校教师评价管理系统的前后端分离代码

很高兴能为您提供这方面的帮助，以下是基本的代码结构和技术选型：

## 后端代码结构

├── src
│   ├── main
│   │   ├── java
│   │   │   ├── com
│   │   │   │   ├── example
│   │   │   │   │   ├── config
│   │   │   │   │   │   ├── MybatisPlusConfig.java
│   │   │   │   │   │   ├── WebMvcConfig.java
│   │   │   │   │   ├── controller
│   │   │   │   │   │   ├── TeacherController.java
│   │   │   │   │   ├── dao
│   │   │   │   │   │   ├── TeacherDao.java
│   │   │   │   │   ├── entity
│   │   │   │   │   │   ├── Teacher.java
│   │   │   │   │   ├── service
│   │   │   │   │   │   ├── TeacherService.java
│   │   │   │   │   │   ├── impl
│   │   │   │   │   │   │   ├── TeacherServiceImpl.java
│   │   │   │   │   ├── Application.java
│   │   │   │   ├── common
│   │   │   │   │   ├── Result.java
│   │   │   │   ├── interceptor
│   │   │   │   │   ├── LoginInterceptor.java
│   │   │   │   ├── mapper
│   │   │   │   │   ├── TeacherMapper.java
│   │   │   │   ├── utils
│   │   │   │   │   ├── JwtUtils.java
│   │   ├── resources
│   │   │   ├── application.yml
│   │   │   ├── mapper
│   │   │   │   ├── TeacherMapper.xml
│   │   ├── static
│   │   ├── templates

## 技术选型

- 后端技术栈：Spring Boot、Mybatis-Plus、JWT、MySQL
- 前端技术栈：Vue、Element UI、Axios

## 后端代码实现

### 配置文件

在 `application.yml` 中配置数据库和 JWT 相关信息。

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/teacher_evaluation?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis-plus:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.entity
  configuration:
    map-underscore-to-camel-case: true

jwt:
  secret: secret
  expire: 3600

### 实体类

@Data
public class Teacher {

    private Integer id;
    private String name;
    private Integer age;
    private String sex;
    private String phone;
    private String email;
    private String address;
    private Integer departmentId;
    private Integer status;

}

### Mapper 接口

public interface TeacherMapper extends BaseMapper<Teacher> {

}

### DAO 层

public interface TeacherDao {

    Teacher selectById(Integer id);

    List<Teacher> selectList();

    int insert(Teacher teacher);

    int update(Teacher teacher);

    int delete(Integer id);

}

### Service 层

public interface TeacherService {

    Teacher selectById(Integer id);

    List<Teacher> selectList();

    boolean save(Teacher teacher);

    boolean update(Teacher teacher);

    boolean delete(Integer id);

}

### Service 实现类

@Service
public class TeacherServiceImpl implements TeacherService {

    @Autowired
    private TeacherDao teacherDao;

    @Override
    public Teacher selectById(Integer id) {
        return teacherDao.selectById(id);
    }

    @Override
    public List<Teacher> selectList() {
        return teacherDao.selectList();
    }

    @Override
    public boolean save(Teacher teacher) {
        return teacherDao.insert(teacher) > 0;
    }

    @Override
    public boolean update(Teacher teacher) {
        return teacherDao.update(teacher) > 0;
    }

    @Override
    public boolean delete(Integer id) {
        return teacherDao.delete(id) > 0;
    }
}

### Controller 层

@RestController
@RequestMapping("/teacher")
public class TeacherController {

    @Autowired
    private TeacherService teacherService;

    @GetMapping("/list")
    public Result list() {
        List<Teacher> list = teacherService.selectList();
        return Result.success(list);
    }

    @PostMapping("/save")
    public Result save(@RequestBody Teacher teacher) {
        boolean result = teacherService.save(teacher);
        return result ? Result.success() : Result.fail("添加失败");
    }

    @PostMapping("/update")
    public Result update(@RequestBody Teacher teacher) {
        boolean result = teacherService.update(teacher);
        return result ? Result.success() : Result.fail("更新失败");
    }

    @PostMapping("/delete")
    public Result delete(@RequestParam Integer id) {
        boolean result = teacherService.delete(id);
        return result ? Result.success() : Result.fail("删除失败");
    }

}

### JWT 鉴权

@Component
public class LoginInterceptor implements HandlerInterceptor {

    @Autowired
    private JwtUtils jwtUtils;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("Authorization");
        if (token == null || !token.startsWith("Bearer ")) {
            throw new RuntimeException("无效的token");
        }
        token = token.replace("Bearer ", "");
        if (!jwtUtils.validateToken(token)) {
            throw new RuntimeException("无效的token");
        }
        return true;
    }
}

## 前端代码实现

### Axios 请求封装

import axios from 'axios'
import { Message } from 'element-ui'

let instance = axios.create({
  baseURL: '/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

instance.interceptors.request.use(config => {
  let token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  if (response.status === 200) {
    return response.data
  } else {
    Message.error('请求错误')
  }
}, error => {
  if (error.response.status === 401) {
    Message.error('登录过期')
    localStorage.removeItem('token')
    window.location.href = '/login'
  } else if (error.response.status === 403) {
    Message.error('权限不足')
  } else if (error.response.status === 500) {
    Message.error('服务器错误')
  } else {
    Message.error('请求错误')
  }
  return Promise.reject(error)
})

export default instance

### Vue 页面

<template>
  <div>
    <el-row>
      <el-col :span="24"><h2>教师列表</h2></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><el-button type="primary" @click="add">添加教师</el-button></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="phone" label="电话"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="departmentId" label="部门"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-dialog title="添加教师" :visible.sync="addDialogVisible">
      <el-form :model="addForm" :rules="addRules" ref="addForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="addForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="addForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="addForm.address"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="addForm.departmentId">
            <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addFormSubmit">添加</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑教师" :visible.sync="editDialogVisible">
      <el-form :model="editForm" :rules="editRules" ref="editForm">
        <el-form-item label="ID" prop="id">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="editForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="editForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <el-select v-model="editForm.departmentId">
            <el-option v-for="item in departmentList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/utils/api'

export default {
  name: 'TeacherList',
  data() {
    return {
      tableData: [],
      addDialogVisible: false,
      addForm: {
        name: '',
        age: '',
        sex: '男',
        phone: '',
        email: '',
        address: '',
        departmentId: ''
      },
      addRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择所属部门', trigger: 'change' }
        ]
      },
      editDialogVisible: false,
      editForm: {
        id: '',
        name: '',
        age: '',
        sex: '男',
        phone: '',
        email: '',
        address: '',
        departmentId: ''
      },
      editRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择所属部门', trigger: 'change' }
        ]
      },
      departmentList: [
        { value: 1, label: '计算机科学与技术' },
        { value: 2, label: '信息管理与信息系统' },
        { value: 3, label: '软件工程' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      api.get('/teacher/list').then(res => {
        this.tableData = res.data
      })
    },
    add() {
      this.addDialogVisible = true
    },
    addFormSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          api.post('/teacher/save', this.addForm).then(res => {
            this.addDialogVisible = false
            this.getList()
          })
        }
      })
    },
    edit(row) {
      this.editForm = Object.assign({}, row)
      this.editDialogVisible = true
    },
    editFormSubmit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          api.post('/teacher/update', this.editForm).then(res => {
            this.editDialogVisible = false
            this.getList()
          })
        }
      })
    },
    remove(row) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.post('/teacher/delete', { id: row.id }).then(res => {
          this.getList()
        })
      })
    }
  }
}
</script>