A takeout software, using element-ui, the order is displayed with el-table, and each column of the table shows the name, quantity, and total price of the goods. Now you want to achieve: when you use el-input-number to dynamically modify the quantity, the total price of the goods will also change.

I originally planned to use watch to listen to the data bound by the table, but Baidu said that vue could not listen for changes in the array? So I was a little overwhelmed and asked the great god for advice

Code

    <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>