vue+ElementUI遇到的问题

wwwwwwwwwwww 发布于 1 月 22 日

1. form表单的布局

可以通过<el-row> <el-col :span(默认是将整个屏幕分成24)> 标签来改变格局;还可以通过<div>里面的style标签(margn-xx[左,右]) 来改变布局 align 选择居中靠右还是靠左 ;

2. table表格内文字过多自动换行显示不雅观

在<el-table>标签内使用

:show-overflow-tooltip="true"

就可以鼠标放在内容哪里就自动显示全部内容但是如果内容过多的话会铺满全屏,在<style>标签内加上

<style>
.el-tooltip__popper {
max-width: 20%;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
background: rgb(48, 65, 86) !important;
color: #fff !important;
line-height: 24px;
}
</style>

会比较好看些

3. 关于:model 和v-model form表单使用:model 如果不使用的话 rules输入框就算输入文字 还是会有提示信息,

4. 关于elementUI日期组件格式转换

<el-form-item label="毕业时间:" prop="graduationDate">

        <template>
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker style="width: 200px;" size="mini" v-model="formdata.graduationDate" align="right" type="date"
              placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </template>
      </el-form-item>
      

value-format="yyyy-MM-dd" 日期格式转换

5.遇到的一个功能 @change

再点击下拉选项的时候执行的一个函数
根据下拉框的选择的值不同可以用来改变其周围的属性值

6. 后台返回的值是数值 在前台转换为数值对应的label :formatter

为每一列绑定属性formatter,值为一个函数,返回要翻译成的中文字符串

<el-table-column prop="expertsp" :formatter="getExpertsp" label="审批状态" width="85">
  </el-table-column>
  
  data中的定义
  Expertsp: [{
        value: '1',
        label: '新增'
      }, {
        value: '2',
        label: '审批中'
      },
      {
        value: '3',
        label: '审批通过'
      },
      {
        value: '4',
        label: '审批不通过'
      }
    ],
    
     // 有多少条数据此函数就会触发多少次(后台传数据,前台遍历显示对应的值)函数
  getExpertsp(row, col) {
    for (var i in this.Expertsp) {
      if (this.Expertsp[i].value == row.expertsp) {
        return this.Expertsp[i].label
      }

    }
  },
  

7.vue 给每行加序号

①我们想在 el-table 中添加序号列时，如下

<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>

我们会惊奇的发现，我们翻页时，序号永远都是从1开始。因为每一次翻页都是根据当前数据的index显示，所以我们要自定义
改造如下

<el-table-column label="序号" type="index" width="50" align="center">
  <template scope="scope">
    <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
  </template>
</el-table-column>

两种

<el-table-column label="序号" type="index" width="60" :show-overflow-tooltip="true">
    <template scope="scope">
      <span>{{scope.$index + 1}}</span>
    </template>
  </el-table-column>

8.下拉选框里的功能

clearable 可清除下拉框里内容

filterable 搜索功能 能搜索此字段的存在内容

9.遇见的一个功能,在本页面跳转后 在打开的页面返回,刷新本来的界面

 // 跳转后页面刷新 和data,methods同级
beforeRouteLeave(to, from, next) {
  console.log(to.path)
  to.meta.keepAlive = false
  next()
},

10. 解决界面无法渲染,但是属性有值,无法显示

方法:

手动渲染

this.$forceUpdate() //数据层次太多的时候,可以手动调用,触发render函数进行自动更新

this.$set(this.formdata,'firstname',name + sex)

自己理解的意思: this.formdata(可以使form的绑定属性,也可以是table; 'firstname'是属性名字单引号; name + sex是赋值给firstname的值)