工作遇到的问题以及解决处理方法-主要是基于vue的antd

所用的组件为基于vue的antd 1.7.8版本

1.查看列表太窄，不要底部的取消确认按钮 完成

通过设置

<a-modal>的：width属性来设置宽度

2.针对不同的情况，提醒的字体颜色不同

    <span slot="examinationStatus" slot-scope="examinationStatus">
            <p v-if="examinationStatus == 0" >{{ examinationStatus | examinationStatusFilter }}</p>
            <p v-if="examinationStatus == 1" style="color: green" >{{ examinationStatus | examinationStatusFilter }}</p>
            <p v-if="examinationStatus == 2" style="color: gray" >{{ examinationStatus | examinationStatusFilter }}</p>
          </span>

在插槽中使用v-if来判断，不同的情况显示不同的颜色，例如style="color: gray"

也可以用v-show来判断

3.遇到一个很诡异的bug

写了一个列表

     <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            :alert="true"
            bordered
            rowKey="autoId"
          >
</s-table>

这个表支持三种搜索方式

 会调用 loadExamination这个后端接口来显示列表的数据。

点击查看组员会调用另一个接口loadUserList

 

   <s-table
            ref="table"
            :columns="usercolumns"
            :data="loadDataname"
            :alert="true"
            bordered
            rowKey="autoId"
          >

            <span slot="serial" slot-scope="text, record, index">
              {{ index + 1 }}
            </span>
            <span slot="headImgUrl" slot-scope="record">
              <a-avatar :src="record.headImgUrl" />
            </span>
          </s-table>

现在诡异的bug来了，当我点开第二张表时，再返回第一张表，进行搜索

后台显示，调用的接口为loadUserList。

排查了好久才发现，我把两个s-table的ref命名一样了。

更改为

<s-table
  ref="usertable"
  :columns="usercolumns"
  :data="loadDataname"
  :alert="true"
  bordered
  rowKey="autoId"
>
就可以了

4.根据表单进行校验，并且当校验失败时，弹窗不隐藏

解决方法是

  this.$refs.form.validate(valid => {
          if (valid) {
逻辑代码
}else
{
    console.log('error submit!!')
}