Debido a que comencé a involucrarme en VUE, la implementación de todas las referencias seleccionadas al método de implementación en Zhihu:
1. Obtenga datos del servidor y establezca el atributo verificado para cada elemento
2. Calcule la cantidad seleccionada SelectCount. Si la cantidad seleccionada es igual al número de selectitems, seleccione todos los selectall
3. Al seleccionar todo, configure el atributo marcado de cada elemento en verdadero, y al seleccionar inversamente, configúrelo en falso.
4. Cada vez que cambia la propiedad de SelectItems, el elemento marcado se coloca en la matriz marcada.
El siguiente es el código de implementación:
// Seleccione todos los datos: function () {return {selectItems: [], // datos obtenidos del servidor}}, calculado: {// seleccione todo el modelo unido a la casilla de verificación selectAll: {get: function () {return this.selectCount == this.selectitems.length; }, establecer: function (valor) {this.selectitems.forEach (function (item) {item.ecked = valor;}); valor de retorno; }}, // La cantidad seleccionada selectCount: {get: function () {var i = 0; this.selectitems.forEach (function (item) {if (item.ecked) {i ++;}}); regresar i; }}, // La matriz seleccionada CheckedGroups: {get: function () {var checkedGroups = []; this.selectitems.forEach (function (item) {if (item.ecked) {checkedGroups.push (item);}}); devuelve los grupos checked; }}}Este método no es muy conveniente de usar. En primer lugar, es difícil de reutilizar. Cada vez que desee usarlo, debe escribir calculado. En segundo lugar, Selectall, CheckedGroups y SelectItems son fijos y no son muy flexibles.
Entonces, en este proyecto, utilicé la instrucción VUE para volver a implementar la función de seleccionar todos. La idea de la directiva es en realidad similar a la de calculado. Comencemos con el código:
Exportar predeterminado {'check -all': {twoway: true, params: ['checkData'], bind () { / ** - Si el atributo verificado de todas las listas es verdadero, seleccione la casilla de verificación All, de lo contrario, la casilla this.set (verdadero); }, // actualizar (verificar) cuando los cambios en la verificación { / ** - Si la casilla de verificación se selecciona, todas las propiedades marcadas de la lista se convierten en verdadero, de lo contrario se convierten en falso* / if (checkall) {this.vm [this.params.checkdata] .forach ((elemento) => {item.checked = true;}); } else {this.vm [this.params.checkdata] .forEach ((item) => {item.ecked = false;}); }},},};Llamado:
<input type = "checkbox" v-model = "checkall" v-check-all = "checkall" check-data = "checkData"> <ul> <li v-For = "elemento en checkData"> <input type = "checkbox" v-model = "item.checked"> {{item.text}} </li> </ul>Hablemos sobre las ventajas de usar esto:
1. Fácil de usar. Simplemente escriba v-check-all y check-data donde sea necesario.
2. El modelo seleccionado y los nombres de matriz se pueden personalizar, y se puede usar cualquier nombre. Si no desea llamar a checkall y checkAllData, también puede llamar a matrices y checkdata dataFromserver.
En la instrucción, especifique dos a verdadero, puede usar this.set(value) para establecer el valor de checkall y usar parámetros para recibir los datos de cheques de valor de la propiedad en el elemento de instrucción de enlace, que es la matriz para operar.
Use this.vm para obtener el contexto de la directiva de uso, llame $watch del contexto para escuchar los cambios en CheckData. Si se selecciona todos los checkdata, establezca checkall en verdadero, de lo contrario, establecer checkall en falso.
Cuando el valor de instrucción (verificar) cambia, si es verdadero, configure el atributo verificado de checkData en verdadero, de lo contrario es falso. En este punto, se completa un comando seleccionado.
Al hacer esta selección de todas las instrucciones, originalmente quería usar ParamWatchers para escuchar los cambios en los datos de checks, pero descubrí que cuando cambia los campos de checks, la devolución de llamada de ParamWatchers no se activará. Más tarde, miré el código fuente y descubrí que ParamWatchers en realidad llamó $watch , pero no admite una detección profunda:
Directive.prototype._setupparamwatcher = function (key, expresion) {var self = this; var llamado = falso; var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) { self.params[key] = val; // since we are in immediate mode, // only call the param change callbacks if this is not the first update. if (called) { var cb = self.paramWatchers && self.paramWatchers[key]; if (cb) { cb.call(self, val, OldVal);Resumir
Lo anterior es todo el contenido de este artículo. Si hay algo mal, por favor dame algún consejo. Espero que el contenido de este artículo sea útil para todos.