关于element框架的注意点（更新中...）

 关于日期选择器的注意点

<el-form-item label="结束时间" prop="endTime" >
  <el-date-picker v-model="formData.endTime" type="date" placeholder="选择日期"/>
</el-form-item>

 注意： 使用普通方法赋值后期可能回出现无法修改的情况，推荐使用  $set  方法

// 使用$set赋值
this.$set(this.formData, "endTime", res.data.endDate);
//this.$set(this.searchMap, "tradedate", new Date());

// 普通赋值方法
this.searchMap.tradedate = tradedate;

输入框enter提交请求

<!-- @keyup.enter.native -->

<el-input @keyup.enter.native="query()"></el-input>

  注：如果在再一次点击时会刷新页面，则是因为自动触发页面的提交功能， 产生刷新页面的行为

解决：
如下代码，在 el-form 中 加个 @submit.native.prevent，就可以了，
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

表单重置

<el-form @ref="demoForm"></el-form>


<script>
    // 重置
    this.$refs.demoForm.resetFields();
    // 清空校验
    this.$refs.demoForm.clearValidate();
</script>

表格相关

关于表格数据改变页面数据无变化的解决办法

 1. 在数据更新之后使用  nextTick方法  中使用this.$refs.table.doLayout()
 2、在el-table的属性中增加一个key属性  然后在数据更新之后改变key的值
  <el-table
    ref="table"
    :data="tableData"
    :key="itemKey"
  ></el-table>


// 在tableData赋值的地方，随机设置下key，页面就会刷新了
this.itemKey = Math.random()

 关于表格使用展开行

1、只展开一行

  <el-table
    ref="table"
    :data="tableData"
    @expand-change="rowExpand"
  ></el-table>


// 相关函数
rowExpand (row, expandedRows) {
      this.expandData = [];
      this.getListIODetail(expandedRows[0]);
      for (let i = 0; i < expandedRows.length; i++) {
        if (expandedRows.length === i + 1) {
          this.$refs.myTable.$children[0].toggleRowExpansion(expandedRows[i], true);
        } else {
          this.$refs.myTable.$children[0].toggleRowExpansion(expandedRows[i], false);
        }
      }
    },
    getListIODetail (row) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.$ajax.get('你的地址').then(res => {
          if (this.$ifAjax(res)) {
            this.expandData = res.data;
          }
        });
      }, 600);
    },

2、展开行之后拿到数据页面不渲染  template 里面必须要写上slot-scope="scope"  即使用不到也要写

  <el-table
    ref="table"
    :data="tableData"
    @expand-change="rowExpand"
  >
    <vd-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="expandData"
              size="mini"
              row-key="aiorId"
            >
              <el-table-column
                label="出库数量"
                prop="num"
                width="100"
              />
            </el-table>
          </template>
        </el-table-column>
  </el-table>

给不同行添加不同颜色

// HTML
<el-table
  ref="myTable"
  :row-class-name="tableRowClassName"
  :stripe="false">
</el-table>

// JS

tableRowClassName ({ row, rowIndex }) {
  if (row.color) {
    return 'rowColorOne';
  } else {
   return 'rowColorTwo';
  }
},

// CSS

<style>
.el-table .rowColorOne {
  background-color: #c7dbf1 !important;
}
.el-table .rowColorTwo {
  background-color: #fff !important;
}
</style>

 点击某一行添加颜色再次点击去掉颜色

// HTML
<el-table
  ref="myTable"
   highlight-current-row
   >
</el-table>


// CSS

<style>
.el-table__body tr.current-row td {
  background-color: pink !important;
}
</style>

  去掉表格鼠标经过颜色

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: unset !important;
}

如何在表格中使用多个复选框

相关地址  element的表格中使用多个复选框

使用element-ui中的table修改鼠标经过或悬停行时颜色修改

相关地址  修改表格鼠标悬停的颜色

vue项目中在table表格中使用switch开关

相关地址  使用switch开关

vue项目中在table表格中根据某个字段合并行

const arr = this.tableData;
      let rowspan = 1;
      let colspan = 1;
      // 要合并的列数，这个可以看需求自己定制
      const spanColumn = [1, 3, 4];
      // 如果是要合并的行
      if (spanColumn.includes(columnIndex)) {
        // 遍历，如果有相同就加1，这里事先让后端把相同的放一起
        for (let i = rowIndex + 1; i < arr.length; i++) {
          // phid相同的合并，这里根据需求判断字段
          if (row.num === arr[i].num) {
            rowspan++;
          } else {
            break;
          }
        }
        // 如果行号大于0，判断phid等于当前行的上一行就是00 这里的逻辑666
        if (rowIndex > 0 && row.num === arr[rowIndex - 1].num) {
          rowspan = 0;
          colspan = 0;
        }
      }
      // 最后就是返回
      return {
        rowspan: rowspan,
        colspan: colspan
      };