2 de junio de 2019
Hace unos días, algunas personas dijeron que esto parece no funcionar. En ese momento, se separó directamente del proyecto. Parece que no se puede ejecutar sin un fondo. Olvídalo, actualízalo. El código simplemente lo convirtió en una demostración, porque no hay paginación en segundo plano, solo recuerde que v-model es equivalente a una matriz, lo ayudará a almacenar la matriz, el uso de esta matriz seleccionará automáticamente cada vez, el siguiente código tiene uno No se pueden demostrar más opciones. ¡Demasiado vago para hacerlo! Solo obtén la selección completa y la selección inversa directamente. Si quieres jugar con mi código anterior, piénsalo, es muy entrenamiento. Si lo comprende, no tendrá miedo de ver el código de otras personas y no comprenderlo en el futuro.
Hablemos de los principios de implementación de la selección total y anti-elección.
En primer lugar, tienes algunos datos, te prepararemos
checkboxList: [
{songId: '1', songName: 'name1', songSinger: '123'},
{songId: '2', songName: 'name2', songSinger: '234'},
{songId: '3', songName: 'name3', songSinger: '345'}
]
Los datos,
Luego deje que se muestre en la página,
<li v-for = "(lista, índice) en checkboxList">
<div>
<etiqueta>
<input type = "checkbox": value = "list.songId"
class = "input_agreement_protocol" v-model = 'checkList'>
<span class = "lists"> {
{list.songName}} </span>
</label>
<span class = "layui-col-md"> {
{list.songSinger}} </span>
</div>
</li>
Utilice el bucle for para recorrer los valores de instancia y mostrarlos en la página.
Luego tenemos que preparar un botón de seleccionar todo, así que en la página tienes que tener
<div class = "checkAll">
<label>
<input class = "input_agreement_protocol" type = "checkbox" class = "checkAll"
v-model = 'comprobado' v-on: click = 'checkAll' />
</label>
<label> 全 选 </label>
</div>
Ahora que hay casi todo en la página, todavía falta el código js que controla la selección de todo y la selección inversa.
En la correspondencia de vue.js, tienes
comprobado: falso, // seleccionar todo
Mire los comentarios del código más tarde.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app1">
<div class="checkAll">
<label>
<input class="input_agreement_protocol" type="checkbox" class="checkedAll"
v-model='checked' v-on:click='checkedAll'/>
</label>
<label>全选</label>
</div>
<ul >
<li>
<span>歌曲</span>
<span>操作</span>
<span>歌手</span>
</li>
<li v-for="(list,index) in checkboxList">
<div>
<label>
<input type="checkbox" :value="list.songId"
class="input_agreement_protocol" v-model='checkList'>
<span class="lists">{
{list.songName}}</span>
</label>
<span class="layui-col-md">{
{list.songSinger}}</span>
</div>
</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
/*
* Created with Sublime Text 3.
* User: 李松林
* Date: 2018-12-24
* Time: 16:27:55
*/
var app=new Vue({
el:'#app1',
data:{
datas:[],
checkboxList:[
{songId:'1',songName:'name1',songSinger:'123'},
{songId:'2',songName:'name2',songSinger:'234'},
{songId:'3',songName:'name3',songSinger:'345'}
],//后台请求的数据
checked: false, //全选框
checkList: [],//临时存放索引的数组
isShow:false,
},
methods:{
checkedAll: function(){
//全选和反选
var _this = this;
// console.log(_this.checked+"---"+_this.checkList+"----"+_this.checkboxList)
this.$nextTick(function() {
console.log(_this.checked);
//判断是否全选、反选
if(_this.checked){
//遍历出后台数据，得到对应值和一个索引
_this.checkList = _this.checkboxList.map(function(json,index){
console.log(json+","+index)
return json.songId;
})
}else {
//如果为反选直接将选中的list清空
_this.checkList = []
}
});
}
},
watch: { //深度 watcher（时刻判断是否处于所有选择框全选，不是就全选框不选择）
'checkList': {
//当新选中的选择框的总个数等于后台全部数据时，全选框选中，否则不选
handler: function(val, oldVal) {
if (val.length === this.checkboxList.length) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
}
});
-------------------------------------------------segmentación línea------------------------------------------------- ----------------------------------------------
30 de diciembre de 2018
El blog de hoy no pretende escribir una demostración, está directamente separado del proyecto y habla aproximadamente sobre el principio y el método de implementación. Por supuesto, también proporcionará el código clave correspondiente.
En primer lugar, me gustaría agradecer a cierto autor por el complemento jquery. No puedo recordarlo de allí, ¡lo siento! Déjame escribir menos código. Por supuesto, usar jquery significa operar dom, y vue claramente lo ha eliminado, y luego todavía tengo que usar jquery, perdóname, soy completamente nuevo en vue, acabo de estar expuesto a él por menos de una semana, y muchos los principios y usos están completamente fuera de las ideas.
Por lo tanto, para aquellos que son pobres en vue.js, también hablaré sobre los problemas encontrados en el aprendizaje de vue y los conocimientos correspondientes para comprender.
Hermano mayor, ¡señale las deficiencias!
-------------------------------------------------- ------------------------------Minuto------------------- ------ secante --------------------- ----------------
Permítanme hablarles sobre las funciones que quiero implementar, que pueden ser de alguna ayuda para ustedes.
La función específica anterior es hacer clic en la categoría para consultar los datos correspondientes, que se representan en ul li a continuación, y se representan usando vue. Es fácil representar los datos json obtenidos por el bucle for atravesado por ajax, al igual que jslt ; jsp usa el método get / set de java Obtained, convertido a xml a través de la reflexión de java para convertirse en un par de etiquetas, que se puede usar para HTML, pero la esencia sigue siendo el código java, por lo que para separar el front y el back end, use el marco de front-end para lograrlo, entonces json es sin duda el mejor formato de datos y es conveniente para renderizar.
La casilla de verificación Seleccionar todo tiene la función de invertir y seleccionar todo. El código para esta función todavía es de un tipo grande en Baidu, pero el tipo grande es el tipo grande. No hay explicación para el código anterior. Deje que Xiaobai vea esa copia y pegar puede funcionar, pero no. Es molesto darse cuenta de que se implementa de esta manera, incluso sin comentarios.
De acuerdo con el hábito de jquery, por supuesto escribo código en archivos .js en lugar de .vue. Esto es muy molesto, parece que mian.js no se ha entendido hasta ahora, y el uso de componentes todavía no se entiende, pero está bien implementar el código de acuerdo con el hábito de jquery.
Al menos de acuerdo con la idea de java y JavaScript para escribir vue, primero cree un objeto vue, encapsule el método en el objeto vue y declare las propiedades correspondientes.
Todo esto, por supuesto, debe usarse en un div que contenga una caja, primero declare la identificación,
HTML
<div id = "app-7">
<p> { {answer}} </p>
</div>
JS
var app7 = new Vue ({
el: '# app-7', // elemento elemento, id div correspondiente
datos:{
respuesta: '' // Declara una propiedad como el formato json, que también se usa para renderizar
}
})
Todos los tutoriales de vue anteriores no son para grandilocuencia, solo quieren racionalizar el principio.
Por supuesto, las opciones de paginación y recordatorio son las cosas más importantes. Esto me ha llevado casi tres o cuatro días. Para ser honesto, Vue a veces es muy difícil de usar y me he encontrado con un gran problema. Hablemos brevemente aquí, y quiero escuchar si tiene alguna solución.
Ahora obtengo los datos que quiero renderizar la página desde el fondo a través de vue + axios, y la función de devolución de llamada renderiza los datos. Cuando entra la página, solicito inmediatamente los datos de renderizado en segundo plano. En este momento, porque la paginación es un jquery, cada visita generará automáticamente la paginación correspondiente, dos cosas separadas. Debido al botón de clasificación mencionado anteriormente, los datos se solicitarán nuevamente después de hacer clic en la consulta, y luego se recuperará una nueva paginación HTML, que existirá al mismo tiempo que la paginación HTML anterior, lo que equivale a agregar debajo de Una línea.
En este momento, sentí que esto era muy malo. Separé el código del complemento de paginación de la función de devolución de llamada y lo escribí en un método en métodos. Al mismo tiempo, la página debería renderizarse al mismo tiempo tan pronto como viene, pero el número de páginas y el total deben ser del método anterior La función de devolución de llamada para obtener los datos correspondientes, puede cargar con éxito los datos después de unos segundos de suspensión en montado, pero esto no cumple con los requisitos.
La carga de estos dos programas al mismo tiempo debe ser que no está definida y el valor de la función de devolución de llamada del método anterior no se puede recuperar. Quiero saber cómo llamar al siguiente método después de que la función de devolución de llamada del método anterior sea Esta cosa ha probado $ nextTick Este método, pero no sirve de nada, al final, escriba el método jquery en la función de devolución de llamada y luego opere el dom para eliminar el elemento anterior.
Bueno, no más tonterías. El siguiente es el conocimiento que debe entenderse.
Si desea realizar la opción de paginación y recordar vue, debe comprender el uso de v-model, esto es muy útil. Puede recordar tus opciones y solo necesitas tener un índice único para el valor consultado de la base de datos, de hecho, puedes entender que ya puedes completar la función en este paso. En comparación con el JavaScript escrito por usted mismo, es realmente conveniente desmarcarlo, seleccionarlo y ponerlo en la matriz, y luego repetir la casilla de verificación de acuerdo con los datos de la matriz.
Pero comprender este principio ya es el tercer día de mi pensamiento. Oye......................
Hay un punto más, el cuadro de selección completo en realidad declara un marcado: falso en v-modelo = vue "verificado", por lo que ha seleccionado y no seleccionado estados, simplemente agregue un evento de clic, de modo que las siguientes casillas de verificación tengan ambos v -model = elemento "checkList", toma cualquier nombre, recorre los datos que solicitas desde el fondo y asigna un índice único a la lista de verificación de todos los datos, para que puedas seleccionar todos, por supuesto, ya sea que la marca sea verdadera o falsa, Asigne checkList = [] si no está seleccionado, simplemente vacíe la matriz.
Este código, todos pueden encontrarlo en Baidu, simplemente lo perfecciono y hablo sobre mi comprensión.
Hay otro problema. Cuando hago clic para seleccionar todo, y luego hago clic en la segunda página, las casillas de verificación se cancelarán al mismo tiempo, porque su lista de verificación no tiene estos índices, estos son los datos de la segunda solicitud, de Por supuesto, no hay Seleccionar, y solo necesita recorrer el índice y asignarlo a checkList de la manera anterior, y luego se selecciona.
Lo siguiente es parte del código correspondiente
Debido a que se usa la plantilla de fondo de Layui, el código que interfiere con la línea de visión no se publica y parte del código puede deducirse.
<div class="layui-btn-group classification" v-for="item in datas">
<a class="layui-btn layui-btn-primary" href="javascript:void(0);"
v-on:click="showSong($event)" :id="item.typeId" v-text="item.typeName"></a>
</div>Esto es html clasificado
<link rel="stylesheet" href="../../layuiadmin/style/MySong.css" />
<div class="panel-body layadmin-homepage-shadow">
<div class="checkAll">
<label class="my_protocol">
<input class="input_agreement_protocol" type="checkbox"
v-model='checked' v-on:click='checkedAll'/>
</label>
<label>全选</label>
</div>
<ul class="list-inline song">
<li>
<span class="song_left layui-col-md7">歌曲</span>
<span class="layui-col-md3">操作</span>
<span class="singer_right layui-col-md2">歌手</span>
</li>
<li class="layui-col-md12" v-for="(list,index) in checkboxList">
<div class="layui-col-md7 song_left">
<label class="my_protocol">
<input type="checkbox" :value="list.songId"
class="input_agreement_protocol" v-model='checkList'>
<span class="lists">{
{list.songName}}</span>
</label>
</div>
<div class="layui-col-md4 singer_right">
<span class="layui-col-md8">
<i class="layui-icon layui-icon-play"></i>
<i class="layui-icon layui-icon-add-1"></i>
<i class="layui-icon layui-icon-file"></i>
<i class="layui-icon layui-icon-edit"></i>
</span>
<span class="layui-col-md">{
{list.songSinger.singerName}}</span>
</div>
</li>
</ul>
</div>
<div id="pageTool"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script src="../../music/query.js"></script>
<script src="../../music/paging.js"></script>
<script src="../../music/song.js"></script>El query.js, paging.js y MySong.css se copian del código de otras personas. El código no se publica y se empaqueta directamente en Baidu Cloud y se usa según sea necesario.
song.js
var app=new Vue({
el:'#app1',
data:{
datas:[],
checkboxList:[],//后台请求的数据
checked: false, //全选框
checkList: [],//选中的索引集合
},
created:function(){
//一次加载的数据（不在更新）
this.showClassification();
},
mounted:function(){
//可变动的数据
this.showSong();
},
methods:{
showClassification:function(){
axios.get('http://127.0.0.1:8045/api/type/selectbysingertypeall',{ //params参数必写 , 如果没有参数传{}也可以
})
.then(function (response) {
var arr=response.data.data.typeAll;
for(var i=0;i<arr.length;i++){
app.datas.push(arr[i]);
}
})
.catch(function (error) {
});
},
showSong:function(e){
var _this=this;
var id=0;
if(e!=undefined){
id=e.target.id;
}
axios.get('http://127.0.0.1:8045/api/findbisinger',{ //params参数必写 , 如果没有参数传{}也可以
params:{
typeId:id//歌手类型
}
}).then(function (response) {
var arr=response.data.data.list;
//直接将后台拿到的数据赋值给checkboxList
app.checkboxList=arr;
console.log(arr);
//因为后台拿到的数据为pageInfo，所以相应的数据
console.log("每页显示条数:"+response.data.data.pageSize+",总数:"+response.data.data.total
+",第几页："+response.data.data.pageNum);
this.$nextTick(pageTool(id,response.data.data.pageSize,response.data.data.total));
}).catch(function (error) {
});
},
checkedAll: function(){
//全选和反选
var _this = this;
// console.log(_this.checked+"---"+_this.checkList+"----"+_this.checkboxList)
this.$nextTick(function() {
//当全选框选中为true时
console.log(_this.checked);
if(_this.checked){
//将后台请求的索引给checkList数组
_this.checkList = _this.checkboxList.map(function(json,index){
console.log(json+","+index)
return json.songId;
})
}else {
//没有选中清空里面数据
_this.checkList = []
}
});
}
},
watch: { //深度 watcher
//监听事件，当这个数组的新数据长度和请求到的分页数据条数一样，设置全选框的v-mode=“checked”的checked为true或false，然后就能相当于取消选中一样的效果
'checkList': {
handler: function(val, oldVal) {
if (val.length === this.checkboxList.length) {
this.checked = true;
} else {
this.checked = false;
}
},
deep: true
}
}
});
function pageTool(id,pagesize,count){
//先删除上一个分页HTML
$('#pageTool').children().remove();
//这里会自动生成相应的分页HTML，只要pagesize：每页显示条数，count：请求数据的总数 $('#pageTool').Paging({pagesize:pagesize,count:count,callback:function(page,size,count){
//删除上一页选中项
//去除掉在checked对象中的对象
//遍历获取那一页所有的id，比对选中的数组
console.log("完整的一次复选框",app.checkList);
console.log(app.checked)
// app.checkList=[1,2,3,1238];
$("input:checked").prop('checked','');
axios.get('http://127.0.0.1:8045/api/findbisinger',{
params:{
typeId:id,//歌手类型
pageNo:arguments[0]
}
}).then(function(response){
var arr=response.data.data.list;
app.checkboxList=arr;
//当全选被选中，所有复选框选中
if(app.checked){
app.checkList = app.checkboxList.map(function(json,index){
console.log(json+","+index)
return json.songId;
})
}
}).catch(function(error){
});
// console.log('当前第 ' +page +'页,每页 '+size+'条,总页数：'+count+'页')
}});
}
Lo anterior es todo mi entendimiento de esto, y la nube jquery Baidu correspondiente está aquí: enlace: https://pan.baidu.com/s/1LtzpK4p-SZldvrDn2-GZwQ
código de extracción: acsn
Por supuesto, también puede lograr un independiente completo vue pagination, si está bien escrito y es fácil de usar, ¿puede enviarme un mensaje privado para ver lo que escribió el jefe?