工作中element-ui的使用记录（一）多选，单选，动态表格，下拉框，表单验证，时间限制，级联选择器处理，el-input只输入数字

1. elment-ui 多选下拉框组件数据不显示问题

解决方法：

效果：

2. element-ui的单选表格组件

在多选表格的基础上进行处理, 呈现单选表格的作用
主要使用的是ElementUI多选表格中的方法链接

2.1 select 事件当用户手动勾选数据行的 Checkbox 时触发的事件参数selection, row
2.2 row-click 事件当某一行被点击时会触发该事件参数 row, column, event
2.3 selection-change 事件当选择项发生变化时会触发该事件参数 selection
2.4 clearSelection 方法用于多选表格，清空用户的选择
2.5 toggleRowSelection 方法用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）参数row, selected

完整可实现代码

<template>
  <div class="about">
    <h5>子组件about</h5>
    <el-button type="success">成功按钮</el-button>

    <el-table ref="multipleTable" :data="selectData" highlight-current-row @select-all="onSelectAll"
      @selection-change="selectItem" @row-click="onSelectOp">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" type="index" align="center" />
      <el-table-column label="姓名" prop="name" align="center" />
      <el-table-column label="手机号码" prop="telephone" align="center" />
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },],
      multipleSelection: []
    }
  },
  methods: {
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selectItem(rows) {
      if (rows.length > 1) {
        const newRows = rows.filter((it, index) => {
          if (index == rows.length - 1) {
            this.$refs.multipleTable.toggleRowSelection(it, true);
            return true;
          } else {
            this.$refs.multipleTable.toggleRowSelection(it, false);
            return false;
          }
        });
        this.multipleSelection = newRows;
      } else {
        this.multipleSelection = rows;
      }
      this.userId = this.multipleSelection.length
        ? this.multipleSelection[0].guid
        : "";
    },
    onSelectOp(row) {
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.multipleSelection = [];
      this.multipleSelection.push(row);
    },

    handleCheckChange(data, checked, indeterminate) {
      if (checked) {
        this.$refs.dataTree.setCheckedKeys([data.lobbyCode]);
      }
    },
  }
}
</script>

3. element-ui 动态表格实现思路

3.1实现效果如下

3.2. 对数据进行分析

单条数据的格式

2. 接口数据，和我们需要的数据，差别甚大，而且还需要动态显示，所以必须对数据，作统一的分析。

数据处理的目的

3.3 遇到的问题

如何从接口数据中，获取我们需要的数据，对数据进行动态展示。

3.4 整体解决思路

3.4.1. 值班日期处理

因为分属不同的值班类型，夜班、周末班、节假日班，所以需要对左侧的值班日期作统一处理。

值班日期数据展示位置

思路如下：
- 遍历所有的值班日期获取里面的值班日期，存放在一个数据里面。
- 再对数组进行排序去重，计算出真正需要值班的日期。

3.4.2. 表头处理

位置：

4. 动态表格例子

实现思路：代码示例：


<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="100">
            </el-table-column>

            <el-table-column label="配送信息">
                <el-table-column label="地址">
                    <el-table-column v-for="item in childCol " :prop="item.prorp" :label="item.colName" width="120">
                    </el-table-column>
                </el-table-column>
            </el-table-column>

            <el-table-column prop="zip" label="邮编" width="120">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            childCol: [
                { colName: '华泰一班', prorp: 'class1' },
                { colName: '华泰二班', prorp: 'class2' },
            ],
            tableData: [
                {
                    date: '1',
                    name: '王小虎',
                    class1: '上海11',
                    class2: '普陀区',
                    class3: '上海市普陀区金沙江路 1518 弄',
                    zip: "rfedfd"
                },
                {
                    date: '2',
                    name: '王虎',
                    class1: '上海22',
                    class2: '普陀区',
                    class3: '上海市普陀区金沙江路 1518 弄',
                    zip: "sfcd"
                }
            ],
         
        }
    }
}
</script>

5.element-ui 下拉框获取label和id

多选框

data(){
    return {
        options:[
           {id:1,roleName:'dafe'},
           {id:2,roleName:'gged'},
           {id:3,roleName:'dafgddvde'},
           {id:4,roleName:'hjrtb'},
           {id:5,roleName:'fgdcbd'}
         ],
        departmentIds:[],
        departmentNames:[]       
    }
}

   changeLocationValue(val){
      this.departmentIds = [] //初始化数据
      this.departmentNames = [] //初始化数据
      for(let i=0;i<=val.length-1;i++){
        this.options.find((item)=>{ //这里的options就是数据源
          if(item.id == val[i]){
            this.departmentIds.push(item.id) //这里的value我改成了id
            this.departmentNames.push(item.roleName) //这里的label我改成了roleName
          }
        });
      }
      console.log(this.departmentIds)
      console.log(this.departmentNames)
    },

单选框

通过ref的形式获取值
在进行el-select渲染时，给el-select添加一个ref，用于获取值

 methods: {
    // 1.通过ref获取label和value值
    showValueAndLabel() {
      console.log(this.$refs.optionRef.selected.label);
      console.log(this.$refs.optionRef.selected.value);
    }
  }

6. element -ui 表单

6.1 添加验证

 rules: {
                type: [{ required: true, message: '请输选择类型', trigger: 'blur' }],
                areas: [{ required: true, message: '请选择装置区域', trigger: 'blur' }],
                date: [{ required: true, message: '请选择日期', trigger: 'blur' }],
            },

 // 添加
        onSubmit() {
            this.$refs.addForm.validate((valid) => {
                console.log(valid);
                if (valid) {
                    console.log(this.formInline);
                }
            })

        },

6.2 提交后清除表单验证

addPlanTask() {
            console.log("planHeader", this.planHeader);
            addPlanTaskApi(this.planHeader).then(res => {
                if (res) {
                    this.$layer.msgSuccess(res);
                    this.$parent.dataSource();
                    // 保存成功后，清空form表单数据
                    this.$refs.searchForm.resetFields();
                }
            })
        },

7. element-ui 时间选择组件，限制选择日期

效果：

2. 思路：

代码如下：

注：value-format="yyyy-MM-dd，格式化时间。

<el-date-picker v-model="scope.row.DutyDay" type="date" placeholder="选择日期" 
value-format="yyyy-MM-dd"
@change="holidayVerify(scope.row.DutyDay)"
:picker-options="pickerOptions2">
 </el-date-picker>

 data() {
    let that = this;
    return {
      pickerOptions2: {
        disabledDate(time) {
          // 获取时间选择器的月份信息
          const timeyear = time.getFullYear() // 获取时间选择器的年份
          let timemonth = time.getMonth() + 1 // 获取时间选择器的月份

          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = '0' + timemonth
          }
          const elTimeData = timeyear.toString() + timemonth.toString()

          //小于指定时间都不可选
          
          let y = that.monthValue.slice(0, 4)
          let m = that.monthValue.slice(-2);

          return elTimeData < `${y}${m}` || elTimeData > `${y}${m + 2}`
        },

      },

8. element-ui 级联选择器组件获取选择的label和value

法一：

typeName为label的数组。

法二：

根据选择的value,去遍历树，找到对应的label

 getCascaderObj(val, opt) {
            return val.map(function (value, index, array) {
                for (var itm of opt) {
                    if (itm.value == value) { opt = itm.children; return itm; }
                }
                return null;
            });
        },
        
 let labelpath = this.getCascaderObj(data, this.managementDevice);
                labelpath.forEach(el => {
                    this.typeName.push(el.label)
                })
     console.log("typeName", this.typeName);

2024-10-23 更新如下：

9. elementUI组件el-input输入框只能输入数字或保留两位小数

直接使用表单验证（好用）

//使用表单校验 cost:[ 
{ required: true, trigger: 'change', message:'请输入金额'},
{ pattern:
/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
message: '请输入正确的格式,可保留两位小数' } 
],

方法一：使用type=“number”

<el-input v-model.number='count' type='number' maxlength='9'/>

缺点： maxlength不生效 ,可以输入e ,可以输入小数点

方法二：使用正则表达式

<el-input v-model.number='count' oninput="value=value.replace(/[^\d]/g,'')" maxlength='9'/>

其中v-model.number确保获得的count值为数字，即使0开头也会被后续数字代替。