1、el-input

大多数开发中使用el-input的type属性为text，但是当某些form表单中有需要使用输入password的密码框时，会弹出浏览器的账号密码保存提示框，这在非登录时非常的鸡肋。

如果开发者仅仅是需要隐藏密码为'*'，可以直接设置css属性'-webkit-text-security: disc;'。
如果开发者不满足于上一个方法，而想要通过点击按钮显示和隐藏密码，则像一下代码一样通过父相子绝将icon定位到input适当位置并设置方法hiddenPwd(),将属性isHidden绑定到input输入框的type上，进行文本框和密码框的切换。

<el-form-item label="登录密码" prop="">
    <el-input :type="isHidden?'password':'text'" disabled v-model.trim="updateForm.userPwd">
    </el-input>
    <i class="el-icon-view" style="position: absolute;cursor: pointer;" @click="hiddenPwd"></i>
</el-form-item>

isHidden = true
// 手动隐藏密码
hiddenPwd() {
    this.isHidden = !this.isHidden
}

2、el-table

先直接看代码(看着代码量稍多，但实现简单)

<el-table :data="tableData" border style="width: 100%">
  <el-table-column type="index" width="55" align="center" label="序号" />
  <template v-for="it in tableInfo" :key="it.label">
    <el-table-column
      :prop="it.prop"
      :label="it.label"
      :width="it.width"
      :align="it.align"
    >
      <template #default="scope">
        <template v-if="it.prop !== 'date'">
          <span v-html="scope.row[it.prop]"></span>
        </template>
        <template v-else>
          <el-input v-model="scope.row.date"></el-input>
        </template>
      </template>
    </el-table-column>
  </template>
</el-table>

data() {
    return {
      tableInfo: [],
      tableName: [
        ["name", "姓名", "", "center"],
        ["age", "出生日期", "", "center"],
        ["team", "所属运动队", "", "center"],
        ["date", "填写日期", "", "center"],
      ],
      tableData: [
        {
          date: "2013年3月13日",
          name: "Kawhi Leonard",
          age: "1991年6月29日",
          team: "洛杉矶快船队",
        },
        {
          date: "2013年3月13日",
          name: "Paul George",
          age: "1990年5月2日",
          team: "洛杉矶快船队",
        }
      ]
    };
  },
  methods: {
    transformationTableName(arr1, arr2) {
      arr1.forEach((it, index) => {
        arr2.push({
          prop: it[0],
          label: it[1],
          width: it[2],
          align: it[3],
        });
      });
      return arr2;
    },
  },
  mounted() {
    this.transformationTableName(this.tableName, this.tableInfo);
  }

根据el-table-column标签设置表头，我们直接通过v-for循环设置，表头数据为tableInfo，该数据为数组内包含若干个对象，为使开发更加简单避免重复的对象名，我们先按照tableName的数据结构(索引0的值为prop、索引1的值为label、索引2的值为width、索引3的值为align)，使数组中包含数组省去使用对象类型中编写对象名等，然后通过方法transformationTableName，使tableName转换成表头循环的数据结构并返回给tableInfo。
当开发者需要在一个页面使用2个及以上el-table时(这里说2个的情况)，同时父标签使用了flex布局，那这两个table的高度总是会相同，就算你设置了height属性或者/deep/进了该table元素设置height属性也是修改不了的，因为el-table自带'flex-grow: 1;'属性。
如果开发者想要修改某一列、某一行的的样式、功能或者展示展示形式可通过判断表头的prop属性进行判断，这里的例子是将填写日期一整列变为可输入的框，同时双向绑定tableData中的数据。

3、el-icon

修改icon大小用font-size属性

4、el-date-picker

当开发者需要完成使用多种时间格式类型的选择范围时间，并通过select选择器，是没有年度的范围选择，如果我们需要年度的时间范围选择时，那我们需要将两个el-date-picker组合成一个时间范围选择器，先看代码(看着代码量稍多，但实现简单)

<el-form-item label="周期">
    <el-select
      v-model.trim="period"
      placeholder="选择周期"
      @change="changePeriod"
    >
      <el-option
        v-for="item in periodState"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
</el-form-item>
<el-form-item label="日期">
    <el-date-picker
      v-model="selectTime[datePickerParams][0]"
      :type="periodState[datePickerParams].type"
      :value-format="periodState[datePickerParams].valueFormat"
      :format="periodState[datePickerParams].format"
      :clearable="false"
      :editable="false"
      :picker-options="pickerOptionsTimes"
    >
    </el-date-picker>
    到
    <el-date-picker
      v-model="selectTime[datePickerParams][1]"
      :type="periodState[datePickerParams].type"
      :value-format="periodState[datePickerParams].valueFormat"
      :format="periodState[datePickerParams].format"
      :clearable="false"
      :editable="false"
      :picker-options="pickerOptionsTimes"
    >
    </el-date-picker>
</el-form-item>

// 当前周期类型
period = 'month'
// select选中的options索引
datePickerParams = 0
// 周期类型options
periodState = [
    {
      label: '月统计',
      value: 'month',
      type: 'month',
      format: 'yyyy-MM',
      valueFormat: 'yyyy-MM'
    },
    {
      label: '年统计',
      value: 'year',
      type: 'year',
      format: 'yyyy',
      valueFormat: 'yyyy'
    }
  ]
// 切换周期
changePeriod() {
    switch (this.period) {
      case 'month':
        this.datePickerParams = 0
        break;
      case 'year':
        this.datePickerParams = 1
        break;
      default:
        break;
    }
}

// 当前时间
nowTime = new Date()

// 默认开始月份为去年一月，默认结束月份月去年十二月
startMonTime = moment(this.nowTime, 'YYYY').subtract(1, 'year').format('YYYY') + '-1'
endMonTime = moment(this.nowTime, 'YYYY').subtract(1, 'year').format('YYYY') + '-12'

// 默认开始年份为前五年，默认结束年份为去年
startYearTime = moment(this.nowTime, 'YYYY').subtract(5, 'year').format('YYYY')
endYearTime = moment(this.nowTime, 'YYYY').subtract(1, 'year').format('YYYY')

selectTime = [
    [this.startMonTime, this.endMonTime],
    [this.startYearTime, this.endYearTime]
]

// 时间控件限制
pickerOptionsTimes = {
    disabledDate(time) {
      let limit = new Date('2018-01-01 00:00:00').getTime()
      let now = Date.now()
      return time.getTime() > now || time.getTime() < limit
    }
}

通过select选择器，切换el-date-picker的时间格式、时间值格式、时间值、时间类型。
初始赋值时通过moment()按照上述代码形式进行初始化，如果是往前寻找时间使用subtract()、往后使用add()。
本案例限制时间组件范围，通过给picker-options属性赋值pickerOptionsTimes。

element组件使用中的一些问题和开发技巧

1、el-input

2、el-table

3、el-icon

4、el-date-picker