前端细节问题总结

1序号问题：

2重复提交问题：

3各界面互传信息问题：

4延迟

5按钮显示不显示

6下拉框展示接口数据

10两个下拉框 选择第一个传的值调用第二个下拉的信息

7echars使用

2、重复提交问题：

(1)禁止 :disabled = 'dianji' dianji = false 点击之后true

(2)display， v-show都行

(3)俩按钮，切换

4延迟

setTimeout(() => {

this.roomselect();

}, 300);

5按钮显示不显示

<el-button @click="exportexcels2(scope.row)" type="text" size="small"v-if="scope.row.state === '检测完成'"><i class="el-icon-delete"></i>导出</el-button>

<el-button @click="exportexcels2(scope.row)" type="text" size="small"v-else disabled><i class="el-icon-delete"></i>导出</el-button>

5.2 按钮禁用不禁用

<el-col :span="1.5">

<el-button

type="success"

plain

icon="el-icon-edit"

size="mini"

:disabled="single"

@click="handleUpdate"

v-hasPermi="['wenjian:tongzhi:edit']"

>修改</el-button

>

</el-col>

// 非单个禁用

single: true,

6下拉框展示接口数据

<el-form-item label="图书馆类型" prop="userId">

<el-select v-model="form2.id" placeholder="请选择想要预约的图书馆房间">

<el-option

v-for="item in libraryList2"

:key="item.litype"

:label="item.litype"

:value="item.id">

</el-option>

</el-select>

下拉框 多选：：：

<el-form-item label="楼号">

<el-select v-model="form.dId" multiple placeholder="请选择楼号" style="width: 430px">

<el-option

v-for="item in dormitorysList"

:key="item.numbers"

:label="item.numbers"

:value="item.id"

></el-option>

</el-select>

</el-form-item>

7

rules: {

idNumber: [

{ required: true, message: '请输入身份证号', trigger: 'blur' },

{ min: 18, max: 18, message: '身份证号应为18位', trigger: 'blur' }

],

8 循环定时

created() {

setInterval(() => {

this.huotongzhi();

}, 1000 * 60);

},

10两个下拉框 选择第一个传的值调用第二个下拉的信息

第一个选择了之后 有个@change 调用第二个下拉的接口 把第一个选的值给这个接口传过去第二个就有值了。

<el-form-item label="科研类别" prop="region">
  <el-select v-model="form.keYantype" @change="getKeyanList" placeholder="请选择科研类别"  style="width: 400px">
    <el-option label="论文类别" value="论文类别"></el-option>
    <el-option label="课题类别" value="课题类别"></el-option>
    <el-option label="专利类别" value="专利类别"></el-option>
    <el-option label="著作类别" value="著作类别"></el-option>
  </el-select>
</el-form-item>
<el-form-item label="类别分类" prop="userId">
  <el-select v-model="form.type" placeholder="请选择类别分类">
    <el-option
      v-for="item in typeList"
      :key="item.type"
      :label="item.type"
      :value="item.type">
    </el-option>
  </el-select>
</el-form-item >

/** 查询科研列表 */
getKeyanList() {
  listKeyan2(this.form).then(response => {
this.typeList = response.data;
console.log(response)
  });
},

9使用echors

1、npm install echarts

2、import * as echarts from "echarts";

3在官网：：

放在方法里面：：

上面加上：

var chartDom3 = document.getElementById("main3");

var myChart3 = echarts1.init(chartDom3);

echarts的option书写完后加上

1、// myChart3.setOption(option3, true);

2、option3 && myChart3.setOption(option3);

其中一个， div添加高度

4、调用方法：：；

替换L::

删掉替换成下面的 ：：；

上面的值必须是：

实体里面 list返回