工作总结

最新推荐文章于 2022-01-17 11:13:10 发布

Ellie艾藜

最新推荐文章于 2022-01-17 11:13:10 发布

阅读量153

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue2.0 js

本文链接：https://blog.youkuaiyun.com/qq_38950979/article/details/94568536

vue2.0 同时被 2 个专栏收录

10 篇文章

订阅专栏

7 篇文章

订阅专栏

本文分享了使用Vue框架开发快速办卡页面的经验，包括解决逻辑不清、需求理解不足及时间规划难题，详细介绍了默认选中单选框、获取el-table行索引及watch与computed属性的综合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue框架做的快速办卡页面

标题

工作中遇到的问题 1.逻辑不清，2.不了解需求，3.没有时间规划

花费时间：6.11-7.3 花了22天时间

学到的知识点：

1.使用vue如何默认选中单选框

//HTML
<input type="radio" name="radios" value="1" v-model="param"><label>one</label>
<br>
<input type="radio" name="radios" value="2" v-model="param"><label>two</label>
<br>
<input type="radio" name="radios" value="3" v-model="param"><label>three</label>

//JS
export default{
    data(){
        return{
            param:'1' //设置默认值为1，即设置第一个单选框为选中状态
        }
    }
}

当绑定了数据时，可以在created()中定义

<el-radio type="button" border label="1" value="1" :disabled="isDisabled" @change="radioChange" v-model.trim="cardTransactInfos.transactData.startDateBtn">当天</el-radio>
<el-radio type="button" border label="2" value="2" :disabled="isDisabled" @change="radioChange" v-model.trim="cardTransactInfos.transactData.startDateBtn">明天</el-radio>
<el-radio type="button" border label="3" value="3" :disabled="isDisabled" @change="radioChange" v-model.trim="cardTransactInfos.transactData.startDateBtn">下月</el-radio>

this.cardTransactInfos.transactData.startDateBtn = '1'

2. element-ui 点击行如何获取el-table的行索引(文档中有一个tableRowClassName方法，可以获取到当前行的index，)

<el-table ref="planTable" :data="planData" style="width: 100%;" header-cell-class-name="text-center" cell-class-name="text-center" highlight-current-row @row-click="ifZero" :row-class-name="tableRowClassName">

tableRowClassName ({row, rowIndex}) {
 2       //把每一行的索引放进row
 3       row.index = rowIndex;
 4     },
 5     onRowClick (row, event, column) {
 6       //行点击消除new标记
 7       var index = row.index;
 8       var deleteIndex = Array.indexOf(this.showIndexArr, index);
 9       if (deleteIndex != -1) {
10         this.showIndexArr.splice(deleteIndex,1);  
11       }
12     }

3.watch和计算属性computed一起调用的话可以监控更新全局定义的变量

例：当要判断输入的姓名是否为空时，在watch里面定义：

ifNext: function (val1, val2) {
    this.cardTransactInfos.transactData.formData.userName = val1
    this.cardTransactInfos.transactData.formData.cardholderMobile = val2
 }

在computed中判断

ifNext () {
      if (this.cInd ==='') {
        //console.log(this.cInd);
      } else {
        var Username = this.cardTransactInfos.transactData.formData.userName
        if (Username != '')                 
        {
          //做出判断之后需要做的事
          this.parkingSelection = true
          this.modeSelection = true
        }
      }
    }