Índice
prefácio
Este artigo registra como introduzir vuedraggable para concluir a operação de arrastar e soltar de itens de atributo e registrar a ordem de arrastar e soltar na tabela.
Declaração de necessidades
Existe uma função de exibição de tabela ampla no projeto, a lógica básica é: Após o administrador configurar os campos a serem exibidos na tabela ampla e as fontes de dados dos campos, o usuário pode visualizar os dados da tabela correspondente na página de exibição.
Novos requisitos são apresentados para itens configuráveis de tabela ampla, que exigem a ordem de exibição de campos livremente configuráveis .
análise de demanda
Implementação 1: as linhas do campo podem ser arrastadas e soltas
Esta implementação é baseada nos componentes de configuração de campos existentes, adicionando um efeito arrastável, conforme a figura abaixo:
Porque podem existir muitos (dezenas) de campos a serem selecionados, e apenas os campos marcados precisam ser exibidos e classificados. usar esse método de arrastar e soltar tornará a operação de classificação de campo muito trabalhosa.
Implementação 2: adicionar um componente de classificação arrastável
Um novo componente é adicionado para ler a lista de campos verificados em tempo real e gerar os rótulos arrastáveis correspondentes.O usuário pode alterar a ordem dos campos arrastando os rótulos.
Um efeito semelhante é o seguinte:
Esta solução parece mais intuitiva e mais alinhada com os hábitos operacionais do usuário, então o seguinte é baseado nesta solução para completar os requisitos.
Realização de necessidades
mudanças na tabela
Como o lado da exibição precisa ler as informações de classificação, uma coluna de classificação precisa ser adicionada na tabela de registro de campo existente. Aqui, assume-se que a nova coluna de classificação é sort , que é do tipo int , e o valor padrão é -1 .
front-end
Importar componentes
// 为 package.json 中的 dependencies 项新增如下属性
"vuedraggable": "^2.24.3"
// 相关页面引入 vuedraggable
import draggable from 'vuedraggable'
// 在vue中注册组件
components: {
draggable
},
Análise da estrutura de dados
-
fieldListUma lista existente, armazenando todos os dados de campo- O atributo existe no item de dados
ide o ID do campo de registro - O atributo existe no item de dados
name, registre o nome do campo - O atributo existe no item de dados
isChecked, se o campo de registro estiver marcado - Um novo atributo é adicionado
sortao item de dados para registrar as informações de classificação do campo (o valor padrão é -1, o que significa não participar da classificação)
- O atributo existe no item de dados
-
fieldSortListAdicionada uma nova lista , com a mesma estrutura de dadosfieldList, para o componente de classificação ler as informações- Depois de marcar ou desmarcar os campos,
fieldListos campos marcados precisam ser sincronizados parafieldSortList - Depois de alterar a ordem do campo arrastando manualmente,
fieldSortListas informações do pedido precisam ser sincronizadas comfieldListosort
- Depois de marcar ou desmarcar os campos,
Sincronizar informações de verificação de campo
// 新增方法以更新字段排序列表
updatefieldSortList(){
// 取出被勾选的字段
let checkedItems = this.fieldList.filter((item) => item.isChecked)
// 赋予新增字段（sort值为-1）序号
let unSortItemList = checkedItems.filter(item => item.sort === -1)
if (unSortItemList !== null && unSortItemList !== undefined && unSortItemList.length > 0) {
// 赋值：当前排序列表中的最大值+1（也即排序列表的当前长度-1）
unSortItemList.forEach(unSortItem => unSortItem.sort = checkedItems.length - 1)
}
// 将字段信息按sort值排序，并将其复制至排序列表
this.fieldSortList= JSON.parse(JSON.stringify(checkedItems.sort((a,b)=>a.sort-b.sort)))
}
<!-- 字段的勾选框，每个字段被勾选之后都会调用函数 checkboxChange -->
<el-checkbox @change="checkboxChange(fItem)"></el-checkbox>
// 在 checkboxChange 方法中新增更新操作
checkboxChange (item){
// 省略现有逻辑
console.log(item)
// 勾选/取消勾选时更新字段排序列表
this.updatefieldSortList()
}
// 在 created 中新建如下调用，用于在进入页面时生成可拖拽排序字段
this.updatefieldSortList();
Mostrar lista ordenada
<!-- 引入自定义标题头，声明排序组件标题（可选） -->
<headTitle headTitle="所选字段排序"></headTitle>
<div class="fieldSortBox">
<!-- 引入拖拽组件，读取排序列表数据 -->
<draggable v-model="fieldSortList" class="dragItemCollection">
<!-- 遍历排序列表数据，使用el-tag包裹数据项名称 -->
<div v-for="item in fieldSortList" :key="item.id" class="dragItem">
<el-tag type="info">{
{ item.name}}</el-tag>
</div>
</draggable>
</div>
// 自定义样式，修饰排序组件内容
.fieldSortBox {
margin-left: 130px;
.dragItemCollection{
display: inline-flex;
flex-wrap: wrap;
.dragItem {
margin:5px 5px 5px 5px !important;
}
}
}
Neste ponto, a página deve conseguir exibir o componente de ordenação normalmente, e o componente de ordenação também pode ser alterado sincronizadamente com a verificação do campo, conforme a figura a seguir:
Sincronize as informações de classificação de arrastar e soltar
// 新建侦听属性，侦听 fieldSortList
watch:{
fieldSortList: function (newVal, oldVal) {
let sortId = 0
// newVal 中的元素顺序即用户拖拽后看到的元素顺序
newVal.forEach(sortItem=>{
// 找到 fieldList 中对应的字段
let fieldItem = this.fieldList.filter((item) => item.isChecked).find(item=>item.id = sortItem.id);
// 将页面显示顺序设置为元素 sort 字段值
fieldItem.sort = sortId++;
})
}
}
Neste ponto, a configuração de arrastar e soltar do campo no lado do gerenciamento está concluída. Você pode adicionar uma instrução de impressão antes de enviar os dados para o plano de fundo no método de envio da página original e verificar se a ordem após arrastar é atualizada para o campo da item de dados de campo de forma síncrona sort.
O efeito final é o seguinte:
O lado do visor é exibido na ordem
Método 1: classificação de back-end
Quando o display solicita dados do back-end, o back-end sortpesquisa por campos e retorna os resultados para o front-end, e o front-end pode atravessá-los e exibi-los após recebê-los.
QueryWrapper queryWrapper = new QueryWrapper<Field>().orderByAsc("sort");
return fieldService.list(queryWrapper);
Método 2: classificação de front-end
sortQuando o display end solicita dados de fundo, o background verifica diretamente os dados e retorna os resultados para o front end, e o front end os exibe em ordem de valores após recebê-los .
Resumir
- vuedraggable pode concluir operações de arrastar e soltar front-end, fornecendo um grande número de APIs para operações personalizadas
- A ordem visual do usuário após arrastar é o valor de classificação do armazenamento final