element和element-plus使用区别

el-table

  <template slot-scope="scope"></template>  // element
  <template #default="scope"></template>  // element-plus

el-dialog

  <!-- element -->
  <span slot="footer" class="dialog-footer">  
      <el-button @click="_cancel">取 消</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
  </span>

  <el-dialog :visible="dialogVisible"></el-dialog>

<!-- element-plus -->
  <template #footer>
      <span class="dialog-footer">
          <el-button @click="_cancel">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
      </span>
  </template>

  <el-dialog v-model="dialogVisible"></el-dialog>

el-button

<!-- element -->
   <el-button type="text" @click="rowAdd(scope)">新增</el-button>
<!-- element-plus -->
   <el-button type="primary" link @click="rowAdd(scope)">新增</el-button>

el-date-picker

  <!-- element -->
  <el-date-picker 
  class="delay-times-picker dia-ipts" 
  v-model="ruleForm.releaseTime" 
  :picker-options="pickerBeginDateBefore" 
  default-time="00:00:00" 
  type="datetime" 
  value-format="yyyy-MM-dd HH:mm:ss" 
  placeholder="请选择发布时间">
  </el-date-picker>
  <!-- element-plus -->
  <el-date-picker 
  v-model="ruleForm.releaseTime" 
  :disabled-date="pickerBeginDateBefore" 
  :default-time="new Date(0,0,0,0,0,0)" 
  type="datetime" 
  value-format="YYYY-MM-DD HH:mm:ss" 
  placeholder="请选择发布时间">
  </el-date-picker>

el-icon

<!-- element -->
<i class="el-icon-edit"></i>
<!-- element-plus -->
<el-icon><component is="el-icon-edit" /></el-icon>

去掉修饰符

如stop、async、trim、native

css

  /deep/  => ::v-deep

echarts

错误图片

image.png

//引入
<!-- v2 -->
import echarts from 'echarts'
this.chart = echarts.init(document.getElementById('echarts-wrap'));
<!-- v3 -->
import * as echarts from 'echarts';
let chart = echarts.init(document.getElementById('echarts-wrap'));

不用响应式变量来获取echarts元素： 因为前者切换legend时会报错