form表单单选及watch监听案例总结

最新推荐文章于 2024-07-10 11:21:49 发布

last Dances

最新推荐文章于 2024-07-10 11:21:49 发布

阅读量838

点赞数 3

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_52307122/article/details/129921984

版权

1，案例一：再form表单中每一项添加单选按钮实现代码如下

 <el-table
    ref="multipleTable"
    :data="projectList"
    highlight-current-row
    style="width: 80%"
    :header-cell-style="{textAlign: 'center'}"
    :cell-style="{textAlign: 'center'}"
    @current-change="handleCurrentChange">
       <el-table-column type="index" width="50">
         <template slot-scope="scope">
           <el-radio v-model="radioValue" :label="scope.row.productId" />
         </template>
       </el-table-column>
 </el-table>
  data() {
    return {
		radioValue: '', // 单选按钮属性
	}
  },
  methods: {
	handleCurrentChange(val) {
      if (!val) return
      this.radioValue = val.productId
    }
  }
  <style lang="scss" scoped>
    .tableValue {
    display: flex;
    h3{
      color: #000;
      margin: 45px 40px 0 0;
    }
    /deep/ .el-radio__label {
      display: none;
    }
    /deep/ .el-radio {
      .el-radio__inner {
        border-radius: 0%;
      }
    }
    /deep/ .el-radio__input.is-checked .el-radio__inner:after {
      content: "";
      width: 10px;
      height: 5px;
      border: 1px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 2px;
      left: 1px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }
  }
  <style>

2, 案例二：修改选项将更改内容存储在vuex中，在列表组件，通过watch监听vuex中保存到属性值，当属性值变化时，刷新页面
（1）组件中定义并且存储

   <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="handleClick()">确 定</el-button>
   </span>
   // 确认点击按钮
    handleClick() {
	   this.dialogVisible = false
	   this.$store.commit('changeProject', this.applyInfo)
 	},

（2）vuex中定义存储
（3）组件中watch() 监听

// 导入
  computed: {
    ...mapState(['userInfo', 'product', 'asiderPlatType', 'changeProject'])
  },
  // 监听
  watch: {
    changeProject: {
      handler() {
        this.product.systemTag = this.changeProject.systemTag
        this.inputValue = this.changeProject.systemName
        this._getApplyList() // 执行次获取列表数据方法
        this.dialogVisible = false
      }
    }
  },