0
306
Vistas¿Puedo hacer que mi componente Vue acepte una fórmula dinámica como Excel?
Quiero que mi componente acepte una fórmula diferente para el cálculo de la última columna y use esa fórmula para obtener vuex para almacenar el estado total que pasé en mi componente.
Componente que quiero hacer: -Puede tener columnas dinámicas ✓ -Puede aceptar la fórmula dinámica X -Especifique qué columna agregar en la fórmula X
A continuación se muestra el código de mi componente.
<template> <div> <h2 class="text-center">{{ title }}</h2> <v-row> <v-col v-for="(header, i) in headers" :key="i"> <div class="text-center">{{ header.text }}</div> </v-col> </v-row> <v-row class="align-center" v-for="(item, i) in stateArr" :key="i"> <v-col v-for="(header, j) in headers" :key="j"> <div v-if="header.type == 'number'" class="text-center"> {{ i + 1 }} </div> <div v-if="header.type == 'input'"> <v-text-field outlined dense hide-details="auto" :value="item[header.value]" @input="commit(i, header.value, $event)" > </v-text-field> </div> </v-col> </v-row> <v-row> <v-col> <h2 class="text-center">Total</h2> </v-col> <v-spacer></v-spacer> <v-col> <h2 class="text-center">0</h2> </v-col> </v-row> </div> </template> <script> import { mapState, mapMutations } from "vuex"; export default { props: { stateName: { default: "", }, headers: { default: () => [], }, title: { default: "", }, rows: { default: 5, }, }, mounted() { for (let i = 0; i < this.rows; i++) { this.addRow(this.stateName); } }, computed: { ...mapState({ stateArr(state) { return state[this.stateName]; }, }), }, methods: { ...mapMutations(["mutateArr", "addRow", "reduceRow"]), commit(index, property, val) { this.mutateArr({ name: this.stateName, index: index, property: property, val: val, }); }, }, }; </script>1 Respuestas
Responde la pregunta0
Tendrá que escribir alguna lógica de análisis de fórmulas. Supongamos que desea implementar una fórmula para sumar los valores de las columnas X, Y y escribir eso en la columna Z. La fórmula que escribirías en la columna Z sería algo así como X[1]+Y[1]. Ahora en JavaScript, depende de ti cómo lo analices.
Una forma sería
getInput(formula) { const arr = formula.split('+') const isPositiveOperation = arr.length > 1 if(isPositiveOperation) { const xIndex = arr[0].split('X[')[0].split(']') const yIndex = arr[1].split('X[')[0].split(']') const xValue = this.xItems[xIndex] const yValue = this.yItems[yIndex] return xValue + yValue } }Esto es muy básico, por supuesto. Puede buscar expresiones regulares para obtener soluciones más sólidas.