vue根据配置生成表单,vue动态添加表格列

2022-08-31 22:34:07 分类：vue 阅读()

　　vue根据配置生成表单,vue动态添加表格列

　　本文主要介绍vue自定义表格列的相关信息，以及表格组件在开发中经常用到的内容。文章还通过示例代码详细介绍，有需要的朋友可以参考一下。

　　

目录

　　前言效果图

　　可设置组件

　　使用

　　结束语

　　

前言

　　我们在开发PC端项目使用表单，尤其是crm系统时，应该经常会遇到这样的需求，用户需要根据设置自定义显示栏目。查了一下element的官方文档，没有这个组件，所以手工封装了一个简单的组件，希望在你开发这样的需求时能有所帮助。

　　

效果图

　　具体效果图如下：

　　显示自定义列(拖放以排序，单击以选择，再次单击以取消选择)

　　根据用户设置的字段排序/显示/隐藏每一列。

　　

setTable组件

　　首先，我们需要一个插件来实现拖放排序：

　　npminstallvuedraggable-S

　　具体的组件代码如下，代码里已经写了详细的注释，这里不再赘述。

　　setTable.vue

　　模板

　　差异

　　El-dialog title=自定义显示列:visible . sync= dialog visible width= 50%

　　div class=选择菜单菜单框

　　 menus-title 拖动该块以调整显示顺序/p

　　div class=菜单-内容

　　draggable v-model= selected @ update= datadragEnd :options= { animation:500 }

　　过渡组

　　div v-for=所选菜单:key=menu.field class=拖动项目项“{menu.name}}/div

　　/过渡-组

　　/可拖动

　　/div

　　/div

　　菜单-容器菜单-框 v-if=fields.length

　　P= menus-title 选择显示列/p

　　div class=菜单-内容

　　差异

　　class=item

　　:class={active:menu.active}

　　v-for=字段菜单

　　:key=menu.field

　　@click=onSelect(菜单)

　　{{menu.name}}/div

　　/div

　　/div

　　span slot=页脚 class=对话框-页脚

　　El-button @ click= dialog visible=false 取消/el-button

　　El-button type= primary @ click= on save OK/El-button

　　/span

　　/el-dialog

　　/div

　　/模板

　　脚本

　　从“vuedraggable”导入draggable

　　从“@/api/user”导入{ getFields，setFields，getfield control }；

　　导出默认值{

　　名称：可设置，

　　注入：[reload]，

　　道具：{

　　类型：字符串，

　　},

　　组件：{

　　可拖动，

　　},

　　data() {

　　返回{

　　dialogVisible: false，

　　字段：[]，//所有菜单

　　选中：[]，//选中的菜单

　　};

　　},

　　观察：{

　　已选择：{

　　处理程序(oldVal，newVal) {

　　if (this.fields.length===0) {

　　返回；

　　}

　　newVal.map((i)={

　　this.fields.map((j)={

　　if (i.field===j.field) {

　　//如果选定数组中已经存在相同的字段，则active为true。Active主要用于控制所有菜单的选中/未选中样式。

　　j.active=true

　　}

　　});

　　});

　　},

　　},

　　},

　　已安装(){

　　//防止Firefox浏览器在拖动时以新标签打开。

　　document . body . ondrop=function(event){

　　event . prevent default()；

　　event . stop propagation()；

　　};

　　},

　　方法：{

　　异步getData() {

　　//获取所有菜单数据

　　const { data:fields }=await get fields({

　　类型：this.types，

　　});

　　fields.map((item)={

　　//因为服务器不返回活动字段，所以需要在每一条数据上添加活动字段来控制选中的样式。

　　item.active=false

　　});

　　this.fields=fields

　　},

　　异步getFields() {

　　//获取用户选择的菜单，以便再次打开设置时，可以将上次选择的菜单显示回页面，方便用户再次修改。

　　let fields=await getfield control({

　　account_id:这个。$ store . state . user . token . account _ id，

　　用户id:这个. store.state.user.token.userid，

　　类型：this.types

　　});

　　这个. nextTick(()={

　　this.selected.push(.字段。数据)；

　　});

　　},

　　异步onSave() {

　　//保存已选中菜单

　　等待设置字段({

　　帐户id:这个100美元商店。状态。用户。令牌。帐户id，

　　用户id:这个. store.state.user.token.userid，

　　类型：this.types

　　内容：this.selected，

　　});

　　这个。重载()；//刷新页面

　　},

　　异步打开(){

　　//打开设置窗口时清空数据，并再次请求获取最新数据

　　这个。fields=[]；

　　这个。selected=[]；

　　this.dialogVisible=true

　　等等这个。get data()；

　　等等这个。获取字段()；

　　},

　　onSelect(项目){

　　//判断已选中菜单内是否已有点击选择的菜单

　　设findex=this。已选中。查找索引((I)={

　　退货项目。field===I . field

　　});

　　if (findex===-1) {

　　//如果已选中菜单内没有，则添加到最后一条

　　这个。已选中。推(项)；

　　}否则{

　　//如果已选中已有，则点击时应该对其移除，并把活跃的设置为假的，改变其选中的样式

　　item.active=false

　　this.selected.splice(findex，1)；

　　}

　　},

　　datadragEnd(evt) {

　　//拖动排序

　　evt。防止默认()；

　　},

　　},

　　};

　　/脚本

　　样式lang=scss 范围

　　/* 全部菜单*/。菜单-容器{

　　边距-顶部：20px。菜单-内容{。项目{

　　颜色：# 575757;

　　背景：rgba(238，238，238，1)；

　　边框：1px实心rgba(220，220，220，1)；

　　边框-半径：2px 0px 0px 2px

　　}

　　}

　　}

　　/* 菜单通用样式*/。菜单框{。菜单-标题{

　　页边距-顶部：10px

　　行高：32px

　　}。菜单-内容{

　　显示器：flex

　　柔性包装：缠绕；项目{

　　光标：指针；

　　显示：内嵌-伸缩；

　　对齐-项目：居中；

　　对齐-内容：居中；

　　填充：8px

　　边距：10px

　　边框半径：3px

　　}。活动{

　　颜色：# fff

　　背景：rgba(72，153，229，1)；

　　边框-半径：2px 0px 0px 2px

　　}

　　}

　　}

　　/* 已选菜单*/。选择菜单{。菜单-内容{。项目{

　　边距：0px

　　边框半径：0;

　　背景：rgba(255，255，255，1)；

　　边框：1px实心rgba(220，220，220，1)；

　　}

　　}

　　}

　　/风格

　　

使用

　　具体使用如下，在这里已经隐去不必要的业务代码，只把最核心实现的代码贴了出来，以免对大家产生误导.

　　模板

　　差异

　　埃尔表

　　ref=multipleTable

　　:data=tableData

　　高度=60vh

　　:row-class-name= tablerow class name

　　@ selection-change= handleSelectionChange

　　@row-click=handleRead

　　El-table-column type= selection min-width= 55px；/El-表格-列

　　模板v-for=(项目，索引)的字段

　　埃尔-表格-列

　　v-if=item.field===name

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===gender

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 8%;

　　显示溢出工具提示

　　模板slot-scope=“scope”{ scope。划。性别===1？男:女} }/模板

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===公司全称

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 14%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===公司名称

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 12%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===up_date

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 14%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===position

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if= item。field=== remark _ mobiles

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 14%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===源名称

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===address

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if= item。field===详细地址

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if= item。字段===描述

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===remark

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if= item。field===记录内容

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 14%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===owner_name

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　埃尔-表格-列

　　v-if= item。field=== follow _ time

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 8%;

　　显示溢出工具提示

　　模板槽-范围="范围"

　　div v-if= scope。划。follow _ time===范围。划。创造时间暂无/div

　　div v-else { { scope。划。follow _ time format date } }/div

　　/模板

　　/El-表格-列

　　埃尔-表格-列

　　v-if= item。field===下一个跟踪时间

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 8%;

　　显示溢出工具提示

　　模板槽-范围="范围"

　　div v-if= scope。划。 next _ follow _ time===0 暂无/div

　　div v-else { { scope。划。next _ follow _ time format date } }/div

　　/模板

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===createtime

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 8%;

　　显示溢出工具提示

　　模板槽-范围="范围"

　　div { { scope。划。创建时间格式日期} }/div

　　/模板

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===updatetime

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 8%;

　　显示溢出工具提示

　　模板槽-范围="范围"

　　div { { scope。划。更新时间格式日期} }/div

　　/模板

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===is_record

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　模板槽-范围="范围"

　　div{{scope.row.is_record===0？未跟进 : 已跟进} }/分区

　　/模板

　　/El-表格-列

　　埃尔-表格-列

　　v-if=item.field===if_record

　　:key=index

　　:prop=item.field

　　:label=item.name

　　最小宽度= 10%;

　　显示溢出工具提示

　　/El-表格-列

　　/模板

　　埃尔-表格-列标签=操作最小宽度= 8%;

　　模板槽-范围="范围"

　　El-button @ click= handle read(范围。row) type= text 详情/el-button

　　/模板

　　/El-表格-列

　　El-table-column align= right min-width= 4%；

　　模板slot=header

　　I class= icon font icongenduo @ click= on more /I

　　/模板

　　/El-表格-列

　　/el-table

　　集合表ref= setting types= leads /集合表

　　/div

　　/模板

　　脚本

　　从" @/组件/可设置"导入可设置；

　　从" @/API/用户"导入{ getfield控件}；

　　导出默认值{

　　名称："线索",

　　组件：{

　　可设置，

　　},

　　data() {

　　返回{

　　字段：[],

　　};

　　},

　　异步装载(){

　　等等这个。获取字段()；

　　这个。线索()；

　　},

　　方法：{

　　异步getFields() {

　　let fields=wait getfield control({

　　帐户id:这个100美元商店。状态。用户。令牌。帐户id，

　　用户id:这个. store.state.user.token.userid，

　　类型："潜在客户",

　　});

　　这个。字段=字段。数据；

　　},

　　onMore() {

　　这个参考文献。设置。open()；

　　},

　　},

　　};

　　/脚本

　　在这里其实也可以设置成固定的列宽或者通过服务器返回具体的尺寸，这样的话就不用写这么多的如果语句了，会更加方便简洁.

　　

结束语

　　其实刚接到这个需求时，感觉挺复杂的，尤其是需要进行拖动，还要根据服务器返回不同的字段来进行表单列的排序。但整体做下来并没有我想象的那么麻烦。大家在遇到需求时，也一定不要一直想的太多，一定要先去尝试，说不定它并没有你想的那么难.

　　到此这篇关于某视频剪辑软件自定义表格列的文章就介绍到这了，更多相关某视频剪辑软件自定义表格列内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

标签： vue

相关文章阅读

  • 【干货】Vue2.x 组件通信方式详解，这篇讲全了
  • Vue项目的网络请求代理到封装详细步骤
  • React和Vue怎么实现文件下载进度条
  • Vue的生命周期
  • vue3获取DOM节点的3种方式实例
  • vue+elementUI下拉框自定义颜色选择器方式
  • vue数据监听器watch和watchEffect的使用
  • vue首屏加载慢优化方案,vue页面加载慢,vue终极性能优化方案(解决首页加载慢问题)
  • vue项目配置多个请求域名,
  • vue项目配置多个请求域名,,vue项目如何让局域网ip访问配置设置
  • Vue项目启动,nodejs启动vue项目,如何启动一个Vue.js项目
  • vue项目proxy代理不起作用,vue3 proxy代理
  • vue项目proxy代理不起作用,vue3 proxy代理,Vue中如何实现proxy代理
  • Vue页面刷新,vue动态刷新页面
  • Vue页面刷新,vue动态刷新页面,vue中实现页面刷新以及局部刷新的方法
    • 留言与评论（共有 条评论）
       
    验证码：