Vue el table 可编辑,vue移动端table表格插件
本文主要介绍了某视频剪辑软件基于埃尔表拓展之表格加组件，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
目的源码文档表加属性表加事件表加方法表加列表加spanConfig基本用法
目的
配置型表格多级表头/自定义表头、形数据与懒加载用法等支持埃尔表大部分属性和用法内置装货加载内置合并单元格默认跨页选择自定义列模板划重点：后面tableSmart的基础组件
源码
包裹层TableWrap.vue模板
div:s .表格换行
插槽/插槽
div :class=s.noData v-if=！正在加载list.length===0
差异
d图标：class=s.icon type=无数据/d图标
div:class= s . text"{ text } }/div
/div
/div
/div
/模板
脚本
导出默认值{
道具：{
列表：{
类型：数组，
默认值：[],
},
文本：{
类型：字符串，
默认值： 搜索不到您想要的数据~换个条件试一下，
},
正在加载：{
类型：布尔型，
默认值：假的，
},
},
data() {
return { }；
},
};
/脚本
样式lang=scss 模块=s 。表格换行{
位置：相对；
}。noData {
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
部门{
显示器：flex
对齐-项目：居中；
伸缩方向：列；
对齐-内容：居中；
}。图标{
字体大小：60px
颜色：$ color-原色；
}。文本{
颜色：# 80848f
字体大小：14px
边距：8px 0 16px
}
}
/风格
核心拓展脚本
从导入VTableWrap ./表格换行。vue ；
导出默认值{
组件：{
VTableWrap，
},
道具：{
spanConfig: {
类型：对象，
默认值：()=({
属性列表：[],
孩子："孩子",
密钥： ,
}),
},
},
data() {
返回{
domTable: ，
正在加载：{},
};
},
计算值：{
list() {
if (this.spanConfig.key) {
const arr=[]；
这个. attrs $ data . foreach((item)={
如果(item[this。跨度配置。儿童]项目[这个。跨度配置。儿童]).长度){
item[this.spanConfig.children].forEach((子级)={
arr.push({
.项目，
.孩子，
});
});
}否则{
arr.push({
.项目，
});
}
});
返回arrive）
}
归还这个. attrs.data
},
//合并多少个计算
spanArr() {
设接触点=0；
const spanArr=[]；
this.list.forEach((item，index)={
if (index===0) {
跨度排列推(1)；
}否则{
如果(item[this。跨度配置。key]===这个。list[index-1][这个。跨度配置。key]){
spanArr[接触点]=1；
跨度排列推送(0)；
}否则{
跨度排列推(1)；
contactDot=索引
}
}
});
返回斯潘纳尔
},
//取要合并的指数
spanIndex() {
const propList=this .$ attrs。列。map((item)=item。道具 物品。物业)；
归还这个。跨度配置。proplist。map((prop)=(
道具列表。查找索引((key)=key===prop)
));
},
},
已安装(){
这个. nextTick(()={
//此处勿使用文件会区找寻窗子作用域下生成的所有数字正射影像图元素
this.domTable=this .$refs.table.$el.querySelector( .El-table _ _ body’)；
if (this.domTable) {
这个. loading=这个.$正在加载({
锁：真的，
自定义类：这个。美国定制采矿，
文本： ,
微调器：“el图标加载",
目标：这个table.$el.querySelector( .el-table__body )，
});
//加载因为提出函数渲染执行顺序此处需关闭
如果（这个. attrs.loading===undefined) {
这个。正在加载。close()；
}否则{
this.loading.visible=this .$ attrs .正在加载
}
}
});
},
渲染(createElement) {
const { columns=[] }=this$ attrs
//加载
这个. nextTick(()={
这个参考文献。桌子。dolayout()；
if (this.domTable) {
如果（这个. attrs.loading===undefined) {
这个。正在加载。close()；
}否则{
this.loading.visible=this .$ attrs .正在加载
}
}
});
//加上递归
const tableColumn=(item，index)=createElement(
埃尔-表格-列，
{
道具：{
.项目，
},
key: `${item.label}-${index} `，
scopedSlots: {
默认：这个scopedSlots[item.slotName] ，
表头：这个.作用域插槽[项目。插槽头名称] ，
},
},
[
项目。儿童
item .儿童。长度
item.children.map((列表，索引)=表列(列表，索引)),
],
);
const table=createElement(
埃尔表，
{
参考："表格",
道具：{
headerRowClassName:自定义表格标题，
span-method :this。objectspanmethod，
.这个$attrs，
数据：this.list，
},
开：{
.这个。$听众，
},
scopedSlots: {
追加：这个scopedSlots.append，
},
},
[.columns.map((item，index)=tableColumn(item，index))]，
);
返回createElement(VTableWrap ，{
道具：{
正文：这个. attrs.emptyText，
装：这个正在加载，
列表：这个. attrs.data，
},
},[表格]);
},
方法：{
objectSpanMethod({
行索引，
专栏索引，
}) {
如果(这个。跨度指数。包含(列索引)){
const _ row=this。span arr[rowIndex]；
const _col=_row 0？1 : 0;
返回{
rowspan: _row，
colspan: _col，
};
}
},
clearSelection() {
这个参考文献。桌子。清除选择()；
},
toggleRowSelection(行，选定){
这个参考文献。桌子。togglerowselection(行，选定)；
},
toggleAllSelection() {
这个参考文献。桌子。togglerowselection()；
},
toggleRowExpansion(行，展开){
这个参考文献。桌子。togglerowexpansion(行，展开)；
},
setCurrentRow(row) {
这个参考文献。桌子。setcurrentrow(row)；
},
clearSort() {
这个参考文献。桌子。清除排序()；
},
clearFilter(columnKey) {
这个参考文献。桌子。清除过滤器(列键)；
},
doLayout() {
这个参考文献。桌子。dolayout()；
},
排序（属性，顺序){
这个. refs.table.sort(prop，order)；
},
},
};
/脚本
样式lang=scss 模块=s 。自定义{
右：1px
底部：1px
身高：100%;
：全局(。el-icon-loading){
显示：无；
}
}
/风格
文档
TablePlus Attributes
描述类型可选值数据的默认值数据数组的高度——heightTable由数据显示，默认值为自动高度。如果高度是数字类型，单位是px；如果高度是字符串类型，则此高度将被设置为style.height of Table的值，并且表格的高度将由外部样式控制。String/number —— max-height表格的最大高度。的合法值是一个数字或以像素为单位的高度。string/number——stripe zebra模式表是否为boolean-false边框是否有垂直边框boolean-false size table的大小string medium/small/mini-fit列的宽度是否自扩展？boolean-trueshow-header显示标题。应该突出显示当前行的boolean-false current-row-key，并且应该只写入属性字符串。Number——row-class-name行的类名的回调方法或字符串可用于为所有行设置固定的类名。Function ({row，rowindex })/string —— row-Style。您也可以使用固定对象为所有行设置相同的样式。function ({row，rowindex })/object 3354 cell-class-name单元格的类名的回调方法，或者可以使用字符串为所有单元格设置固定的类名。Function ({row，column，rowindex，column index })/string 3354单元格样式单元格的样式回调方法。您也可以使用固定对象为所有单元格设置相同的样式。Function ({row，column，rowindex，column index })/object 3354 header-row-class-name。还可以使用字符串为所有标题行设置固定的类名。Function ({row，rowindex })/string —— header-row-Style表头行样式的回调方法也可以使用固定对象为所有表头行设置相同的样式。Function ({row，rowindex })/object —— header-cell-class-name标题单元格的类名的回调方法。您还可以使用字符串为所有标题单元格设置固定的类名。Function ({row，column，rowindex，columnindex})/string3354标题单元格样式的回调方法。您也可以使用固定对象为所有标题单元格设置相同的样式。Function ({row，column，rowindex，column index })/object 3354 row-Key行数据键，用于优化表的渲染；使用保留选择功能和显示树数据时，此属性是必需的。当类型为String时，支持多层访问：user.info[0]。id，但不支持user.info [0 ].id。在这种情况下，请使用函数。function(row)/String-—— empty-text数据为空时显示的文本内容。你也可以设置字符串-还没有数据。默认情况下，default-expand-all通过slot=empty 展开所有行。当表的展开行存在或者是树表时，Boolean-false expand-row-keys有效。可以通过这个属性设置表的当前展开行，需要设置row-key属性才能使用，它是展开行的keys数组。array-default-对默认排序列的属性和顺序进行排序。它的prop属性指定默认的排序列，order指定默认的排序顺序。对象顺序：升序、降序如果只指定了prop，但没有指定顺序，则默认顺序为升序tooltip-effect tooltip effect property String dark/light show-summary是否显示合计行Boolean-false sum-表末的文本合计行字符串的第一列的文本-total summary-method用户定义的合计计算方法Function({ columns，Data })3354合并行或列的span-method Function({ row，column，rowindex，column index })3354 Select-on-termin ate In
如果为true，则选择所有行；如果为false，将取消选择所有行。当显示树数据时，树节点的缩进将是16号。加载子节点数据的功能将在lazy为真时生效。该函数的第二个参数包含节点的层次信息。Function(row，Treenode，resolve) —— tree-props用于呈现嵌套数据对象的配置选项-{haschildren: haschildren ，Children: children }-分隔线-列列表配置数组column[]spanConfig合并表配置对象spanConfig[]slotName自定义插槽名称字符串-
TablePlus Events
事件名称描述参数选择用户手动选中数据行的复选框时触发的事件选择，选择-所有事件选择选择-用户手动选中行的全选复选框时触发的更改。当选择项改变时，selectioncell-mouse-enter将触发该事件。行、列、单元、事件-当单元悬停退出时，鼠标离开将触发此事件。行、列、单元格、事件单元格单击将在单击单元格时触发此事件。行、列、单元格、事件单元格——双击单元格时，dblclick将触发此事件。Row，Column，cell，event当单击一行时，row-click将触发此事件。当鼠标右键单击一行时，上下文菜单将触发这个事件。双击某行时，row，column，eventrow-dblclick将触发此事件。Row，column，Eventheader-click当点击一列的表头时会触发事件列，event header-context menu当鼠标右键点击一列的表头时会触发事件列，eventshort-change会触发事件{column，prop，Order }filter-change当表格的过滤条件发生变化时会触发此事件。参数的值是一个对象，对象的键是Column的columnKey，对应的值是用户选择的过滤条件数组。Filterscurrent-change当表的当前行发生变化时，将触发该事件。如果要高亮显示当前行，请打开表格的高亮显示-当前行属性current row。当拖动标题以改变列的宽度时，OldCurrentRowheader-dragend将触发此事件。New width，old width，column，event expand-change当用户展开或关闭一行时会触发此事件(展开一行时，回调的第二个参数是expandedRows；当表格是树形时，第二个参数是expanded) row，(expanded rows expanded)
TablePlus Methods
方法描述参数clearSelection用于选择多个表，清除用户的选择-切换选择用于选择多个表并切换行的选定状态。如果使用第二个参数，则设置该行是否被选中(如果selected为true，则为选中)row，SelectedtoggleAllSelection用于选择多个表并切换所有行的选中状态-togglewexpansion用于在可展开表和树表之间切换行的展开状态。如果使用第二个参数，则设置该行是否展开(如果expanded为true，则展开)row，expandedsetCurrentRow用于选择单个表，设置某一行选择某一行。如果没有调用参数，当前突出显示的行的选定状态将被取消。RowclearSort用于清除排序条件，数据会回到未排序的状态—clearFilter用于在没有传入参数的情况下清除所有的筛选条件，数据会回到未筛选的状态，或者可以传入一个由columnKeydoLayout组成的数组来清除指定列的筛选条件，重新排列表格。当表格或其祖先元素从隐藏切换到显示时，您可能需要调用这个方法——sort来手动对表格进行排序。参数prop property指定排序列，order指定排序顺序。道具：字符串，顺序：字符串
TablePlus column
对应于参数类型可选值默认值类型的列的类型。如果设置了选择，则显示多选框；如果设置了index，则显示该行的索引(从1开始计数)；如果设置了expand，它将显示为可扩展的按钮字符串selection/index/expand/handler-index。如果设置了type=index，则可以通过传递index属性来自定义索引号。函数(索引)-列的键-键列。如果需要使用filter-change事件，则需要该属性来标识哪个列的过滤条件string——label显示了与标题string——prop对应的列内容的字段名称。还可以使用属性属性string——width对应于列的宽度，使用string——min-width对应于列的最小宽度。和宽度的区别在于宽度是固定的。最小宽度将剩余宽度按比例分配给设置了最小宽度的列。string ——固定列是固定在左边还是右边，true表示固定在左边string，booleantrue，left，Right—render-header列头标签区域渲染中使用的function function (h，{column，$ index}) —— sortable对应的列是否可以排序。如果设置为“自定义”，则意味着用户希望远程排序。您需要监控表的排序-更改事件布尔值、字符串true、false、“自定义”false。排序数据时使用的方法仅在sortable设置为true时有效，并且您需要返回一个数字。与Array.sort Function(a，b)——sort-by指定数据按哪个属性排序，仅在sortable设置为true且未设置sort-method时有效。如果sort-by是一个数组，就按照第一个属性排序，如果第一个相等，就按照第二个排序，以此类推。string/array/function (row，index) 3354 sort-orders数据在排序中使用的排序策略的旋转顺序只有在sortable为true时才有效。需要传入一个数组。当用户单击标题时，该列将根据数组中元素的顺序进行排序。数组中的元素应该是以下三种之一：升序表示升序，降序表示降序，null表示返回原来的顺序[升序，降序，Null]对应的null]resizable列的宽度可以通过拖动改变吗(需要在el-table上设置border属性为true)？boolean—trueformatter用于格式化内容函数(行、列、单元格值、索引)3354 Show-overflow-tooltip Show tooltip boolean—false align对齐字符串left/center/rightleftheader-当内容过长且隐藏时对齐页眉对齐。如果未设置此项，则使用表的对齐方式，当前列标题的string left/center/right-class-name、class name string 3354 label-class-name和自定义类名string——selectable仅对type=selection的列有效。类型Function，Function的返回值用于确定该行中的复选框是否可以选中。Function (row，index) —— reserve-selection仅对type=selection且类型为Boolean的列有效。如果为True，将在数据更新后保留以前选择的数据(需要指定row-key)。布尔假过滤器是数据过滤的选项，数组格式，数组中的元素需要有文本和值属性。Array [{text，value }]—— filter-placement filter弹出框的定位字符串与Tooltip的placement属性相同—是—filter-multi data filtering的选项多选Boolean—truefilter-method用于数据筛选的方法？如果是多选过滤项，每条数据会执行多次，任何时候返回true都会显示出来。Function (value，row，column) 3354 filtered-value如果需要自定义标题筛选的呈现方式，所选的数据筛选项可能需要此属性。Array——-分割线-插槽标头名称自定义标头插槽名称字符串-
TablePlus spanConfig
参数类型可选值默认值key根据键合并string - propList，或者属性array[]children的键值平铺转换列表对应的键，会在内部传递给children，否则需要自己转换string-children。
基本用法
自定义列的显示内容，可以与其他组件结合使用。
*演示通过作用域插槽可以获取到行，列，$索引和商店（表内部的状态管理)的数据，用法参考演示。
差异
d-table-plus:columns=" columns ":data=" table data "
模板#date={row}
i class=el-icon-time/i
span style= margin-left:10px " { row。日期} }/span
/模板
模板# handler="{ row } "
El-button type= text size= small @ click= handler add(row)
新增/el-button
El-button type= text size= small 编辑/el-button
/模板
/d-表加
/div
脚本
导出默认值{
data() {
返回{
列：[
{
标签: 日期，
道具："日期",
对齐："居中",
插槽名称："日期",
},
{
标签: 姓名，
宽度："100像素",
道具："名称",
必填：真，
对齐："居中",
格式化程序：(row)=`${row.name}1111 `，
},
{
标签: 省份，
属性："省",
},
{
标签: 市区，
道具："城市",
},
{
标签: 地址，
属性："地址",
showOverflowTooltip: true，
},
{
标签: 操作，
类型："处理程序",
宽度："150像素",
已修复："右侧",
插槽名称："处理程序",
},
],
表格数据：[
{
日期："2016年5月2日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1518 弄，
邮编：200333,
},
{
日期："2016年5月四日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1517 弄，
邮编：200333,
},
{
日期："2016年5月一日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1519 弄，
邮编：200333,
},
{
日期："2016年5月3日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1516 弄，
邮编：200333,
},
],
};
},
};
/脚本
到此这篇关于某视频剪辑软件基于埃尔表拓展之表格加组件的文章就介绍到这了，更多相关vue table-plus内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。