qq_38468358的博客

业务场景：有时候需要前端实现上移和下移功能代码如下：根据交互形式，我这里是把第一条数据的上移按钮置灰不可点击：:disabled="scope.$index == 0"；最后一条数据下移按钮置灰不可点击：:disabled="(scope.$index + 1) == tableData.length"。<template> <el-table ...

需求：父组件一组数据，子组件是表格数据，父组件的数据需要在子组件表格中进行默认勾选；代码如下：在 table 提供了这样一个方法toggleRowSelection：HTML代码：<template> <el-table ref="multipleTable" :data="tableData" ...

最近遇到这样一个需求：界面默认显示一组数组，点击新增增加一条并且显示删除按钮，数组里有input和下拉框，每组数组的数据互不影响，效果如下图（图制作的有点简陋）：代码如下：&lt;template&gt; &lt;div&gt; &lt;div class="lk-toolbar" v-for="(name, key) in form" :key="key"&..

element-ui表格实现全选和多选功能，先看效果图：代码也是相对简单，根据官网提供的API来实现，具体代码奉上：&lt;template&gt; &lt;div&gt; &lt;el-table :data="tableData" border style="width: 100%"&...

在使用 element-ui 的 el-cascader 组件根据后台返回的数据，需要展示一个默认值，官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader借鉴了一下，话不多说直接上代码：效果图：代码块：<template> <div class="block"> ...

项目中实现 tree 树形控件全选功能，如图：代码如下：1、template 代码中：<el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><el-tree :data="organizationData" ref="organi...

项目中实现 table 表格控件单选功能，如图：基本代码如下：1、template 代码中：<el-table :data="tableData" border stripe ref="tableData" @row-click="singleElection"> <el-table-column label=""...

项目开发中在使用到 tree 树形控件实现单选功能，element-ui 官方给出来复选事件，并没有单选操作，自己就研究了一下，代码如下：1、template 代码中：<el-tree :data="treeData" :props="defaultProps" node-key="id" ref="treeForm" show-che...

Element-ui 在 2.7.0 版本增加 Table 对树形结构数据的支持，官方API也给出了的相应的解决方案，虽然实现了功能，但是不一定能够满足我们日常开发的需求，所以就对它进行了二次封装，效果图如下：代码奉上：我是封装成了组件，在components 里创建文件夹 CustomTreeTable ，在CustomTreeTable 创建eval.js 和 index...