Question

如果在最后一行的第一列中选择了选项，我将动态添加表中的选择和输入的新行。

看起来像https://jsfiddle.net/zgykgery/，所以当您选择“服务”时，会添加新行，并根据服务价格，默认的10％折扣和金额计算该行的总价。

我的服务价格有点笨拙 :value="item.id+'|'+item.price" 所以我有过滤器从价值中取出它。但它有效，现在我不知道如何循环所有行和总和服务价格没有dicount，总和折扣，然后全价与服务价格和折扣。

我知道我应该使用计算属性或观察者，但不知道如何。

如何计算表格中这些值的总和并将其显示在下面的较小表格中？

更新

我是vue的新手，并没有使用计算属性，所以这就是我尝试过的但没有成功：

var Main = {
  data() {
    return {
      rows_top: [{
        service: '',
        position: '',
        visit: '',
        amount: '',
        discount: 10
      }],
      services: [{
          id: 1,
          name: 'Service1',
          price: 100
        },
        {
          id: 2,
          name: 'Service2',
          price: 200
        },
        {
          id: 3,
          name: 'Service3',
          price: 300
        },
      ],
      total_discount: 0,
      total_full_price: 0
    }
  },
  methods: {
    addRow(row, index) {
      // console.log(row)
      if (this.rows_top[this.rows_top.length - 1].service !== '') {
        this.rows_top.push({
          service: '',
          position: '',
          visit: '',
          amount: '',
          discount: 10
        })
      }
    },
    deleteRow(index) {
      this.rows_top.splice(index, 1)
    }
  },
  computed: {
    total_price: () => {
      if (this.rows_top) {
        return this.rows_top.map((r) => {
          return r.amount * this.$options.filters.after_line(r.service)
        })
      }
    }
  },
  filters: {
    after_line: (value) => {
      if (!value) return ''
      let after = value.split('|')
      return after.pop()
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css");
table {
  border-collapse: collapse
}

table,
th,
td {
  border: 1px solid #ddd
}

th,
td {
  padding: 5px
}

tr:nth-child(odd) {
  background-color: #f9f9f9
}

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.2.0/lib/index.js"></script>
<div id="app">
  <template>
  <table>
  <thead>
    <tr>
      <th>Service</th>
      <th>Position</th>
      <th>Visit</th>
      <th>Amount</th>
      <th>Price</th>
      <th>Discount %</th>
      <th>Full price</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in rows_top">
      <td>
        <el-select placeholder="Select" filterable="filterable" @change="addRow(row, index)" v-model="row.service">
          <el-option v-for="item in services" :key="item.id" :label="item.name" :value="item.id+'|'+item.price"></el-option>
        </el-select>
      </td>
      <td>
        <el-select placeholder="Select" v-model="row.position" multiple="multiple" filterable="filterable" allow-create="allow-create" @change="checkNumber(result, index)"></el-select>
      </td>
      <td>
        <el-select placeholder="Select" v-model="row.visit" allow-create="allow-create" filterable="filterable">
          <el-option v-for="i in 10" :key="i" :label="i" :value="i"></el-option>
        </el-select>
      </td>
      <td>
        <el-select placeholder="Select" v-model="row.amount" allow-create="allow-create" filterable="filterable">
          <el-option v-for="i in 30" :key="i" :label="i" :value="i"></el-option>
        </el-select>
      </td>
      <td>{{ row.service | after_line }}</td>
      <td>
        <el-input v-model="row.discount"></el-input>
      </td>
      <td><span v-if="row.service && row.amount">{{ ($options.filters.after_line(row.service) * row.amount - (($options.filters.after_line(row.service) * row.amount) / 100) * row.discount).toFixed(2) }}</span><span v-else-if="row.service">{{ ($options.filters.after_line(row.service) - ($options.filters.after_line(row.service) / 100) * row.discount).toFixed(2) }}</span>
        <el-button v-if="row.service" icon="el-icon-delete" size="mini" @click="deleteRow(index)" class="push-right"></el-button>
      </td>
    </tr>
  </tbody>
</table><br/>
<table>
  <tr>
    <td>Total price</td>
    <td>{{ total_price }}</td>
  </tr>
  <tr>
    <td>Total discount</td>
    <td>{{ total_discount }}</td>
  </tr>
  <tr>
    <td>Total full price</td>
    <td>{{ total_full_price }}</td>
  </tr>
</table>
</template>
</div>

此处还有更新的小提琴，总价格在更改https://jsfiddle.net/zgykgery/21/

时仍为空

Answer 1

正如@Roy J所说，只需使用计算函数来获取计算值，知道当method的数据发生变化时它将自动更改

编辑：当您使用v-for循环

时，设计更简单

methods: {
    priceID (item) {
        return item.id + '|' + item.price
    }
}

<tr v-for="(row, index) in rows_top">
  <td>
    <el-select placeholder="Select" filterable="filterable" @change="addRow(row, index)" v-model="row.service">
      <el-option v-for="item in services" :key="item.id" :label="item.name" :value="priceID(item)"></el-option>
    </el-select>
  </td>
  ...

你会像在Vue中那样使用它。

{{1}}

使用vuejs计算动态添加值的总和

1 个答案: