Vue中表格修改一项数据后,另一项如何实时变化

一个外卖软件,用了element-ui,订单用el-table显示,表格每一列分别表示商品的名称,数量,总价,现在想要实现:用el-input-number动态修改数量时,商品的总价也会随着改变。

本来打算用watch监听表格绑定的数据,但是百度了一下说vue无法监听数组的变化?于是我就有点不知所措了,求大神指教

clipboard.png

代码

    <el-table
        :data="basket"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="name"
          label="商品"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="num"
          label="份数"
          align="center"
        >
          <template  slot-scope="scope" >
            <el-input-number v-show="scope.row.num" size="mini" v-model="scope.row.num"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="小计(元)"
          align="center"
        >
        </el-table-column>
      </el-table>


回答:

简单修改下 单价*数量动态显示就行了

http://jsrun.net/dyXKp/edit

回答:

可以把整行数看成一个对象,结果里面保存一个计算属性就好了

支持MD了真香

回答:

两种方式,如果你是对接的后台,在el-input-number上添加事件,只要判断有值然后延迟请求接口,重新渲染就可以了;如果不链接接口,也是写事件,事件附带参数,当前行的数据及索引(scope.row,scope.$index),在事件中,根据当前变化的值计算出你的金额,然后赋值,最后根据索引把当前行的数据覆盖原数据。

回答:

修改份数时触发事件,把当前列数据传入事件方法,再按需求修改数据回填就是了

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注