前言

为了调试Auth后端，写了一个Vue的前端，结合以前写的文章，对Vue为代表的前端做一个总结，内容分为：

• Control
• View与Data
• Element组件
• CSS

本文主要记录一些Element组件使用过程中遇到的问题，这里是对以前的整理，不进行拓展。

Table

• table多选

  table中多选的设置时，遇到分页时，记录前一页选择的内容。

  1. table上加:row-key="(row) => {return row.account_uid}
  2. selection的el-table-column上加:reserve-selection="true"

  如下：

  <el-table
        :data="dataList"
        highlight-current-row
        style="width: 100%"
        ref="multipleTable"
        :row-key="
          (row) => {
            return row.account_uid
          }
        "
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true"></el-table-column>
     	  ...
     </el-table>
  

• table中文字的折叠

  2种方式：

  1. 直接在column上加:show-overflow-tooltip="true"，如

     <el-table-column prop="dept_desc" :show-overflow-tooltip="true" label="部门描述">

  2. 通过el-tooltip来实现

      <el-table-column prop="dept_desc" label="部门描述"> 
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" placement="top-start">
                     <div slot="content" style="max-width:300px">{{scope.row.dept_desc}}</div>
                     <span v-if="scope.row.dept_desc.length>8">		{{scope.row.dept_desc.substring(0,8)}}...</span>
                     <span v-else>{{scope.row.dept_desc}}</span>
                 </el-tooltip>
             </template>
           </el-table-column>
     

  前者很简单，后者能控制大小

• el-table，reserve-selection情况下，删除带来的问题

Dialog

• dialog的生命周期

​ v-if不显示，但执行了created=> mouted，显示时，watch去观察props

• el-dialog的width在class中调不了，通过el-dialog的属性调节。

Form

• created与mounted在ref上的差异

  created中，this.refs调用没成功，而在mouted中，调用成功。

• resetFields时的首次绑定问题

  先修改后创建时，首次绑定的是修改条目的值，再resetFileds时，设置为该条目的值

  通过reset中赋空值来解决

• Form的使用

  form提交时要使用validate，否则不会进行验证。

Tree

• el-tree，父节点与子节点之间的选择关系

• permTree触发reset后，被异步的handleCheckChange更新掉的问题

  this.$nextTick(() => {......})