Vue表格
Vue表格
仁王_雅治
想一想,一步步来到这里也挺不容易的
展开
-
Vue -- el-table 如何实现动态列加载 & 各动态列中的值都存储在后台对象的一个 json 字段中应如何读取
<template> <div class="first-app"> <el-table :data="infoTableData" :cell-style="{padding:'8px 0px 8px 0px'}" ref="infoTableData" border highlight-current-row> <el-table-column prop="resId" label="资源ID" align="left"&g原创 2021-12-04 10:01:29 · 1736 阅读 · 0 评论 -
Vue -- 解决报错:Expected Object, Function, got String with value “padding:8px 0px 8px 0px;“
报错:Invalid prop: type check failed for prop "cellStyle". Expected Object, Function, got String with value "padding:8px 0px 8px 0px;".报错写法:<el-table :data="infoTableData" cell-style="padding:8px 0px 8px 0px;" ref="infoTableData" border highlight-curr原创 2021-12-02 08:14:02 · 3306 阅读 · 0 评论 -
Vue -- 对表格中的特定列进行合并
:span-method="basicArraySpanMethod"从第四行,第二列开始进行合并,合并3列。即将 [4,2],[4,3],[4,4] 三个单元格合并basicArraySpanMethod({ row, column, rowIndex, columnIndex }){ if(rowIndex == 3 && columnIndex == 1){ re...原创 2020-05-02 23:30:17 · 1311 阅读 · 0 评论 -
Vue -- 改变表头背景颜色 & 设置表格行高
<el-row> <el-col :span="4"> </el-col> <el-col :span="16" class="hostForm"> <el-table :data="item.hostInfo" border style="width:100%;margin-top:20px;" highlight-...原创 2020-05-02 13:20:33 · 4120 阅读 · 1 评论 -
Vue -- 为表格的特定行或特定列增加样式 & 表格不显示表头
可见,效果是加在第一列和第三列上的<el-table :data="basicInfo" border style="width:100%;margin-top:20px;" highlight-current-row :show-header="false" :cell-style="cellStyle"> <el-table-column prop="col1Nam...原创 2020-05-02 12:26:28 · 1169 阅读 · 0 评论 -
Vue -- 当 el-table 中没有数据被选中时,删除键不可用 & ref 在 el-table 中的使用
html<div style="width: 100%;margin-bottom:7px;margin-top:1px"> <el-button icon="el-icon-plus" size="mini" :title="$t('btn.add')" @click="addAppTemplate"></el-button> <el-button...原创 2020-04-24 07:53:30 · 1279 阅读 · 0 评论 -
Vue -- el-table 实现前台分页 & slice 函数的用法
html<el-pagination background v-show="filterTableData.length>15" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[15,30,50...原创 2019-10-27 21:21:58 · 675 阅读 · 0 评论 -
Vue -- 如何在 el-table 的表头上实现单列 & 多列数据的过滤
<div id="tabContainer" style="height:100%;width:100%;"> <el-table :data="infoTableData" cell-style="padding:6px" ref="infoTableData" border highlight-current-row> <el-table-column prop="resId" label="资源ID" align="left"></el-table-c原创 2020-12-31 00:04:24 · 1182 阅读 · 0 评论 -
Vue -- 通过 sortable 字段实现对 el-table 的排序 & 排序过程中遇到的问题
<div id="tabContainer" style="height:100%;width:100%;"> <el-table :data="infoTableData" cell-style="padding:6px" ref="infoTableData" border highlight-current-row> <el-table-column prop="resId" label="资源ID" align="left" sortable></e原创 2020-12-30 23:07:44 · 1923 阅读 · 1 评论 -
Vue -- 如何通过一个搜索框实现对 el-table 的检索 & watch 变量的理解 & filter 函数的用法
<div id="tabContainer" style="height:100%;width:100%;"> <el-input placeholder="请输入资源名称" style="float:right;width:150px;margin-bottom:4px;margin-right:1px;" v-model="inputFilter"></el-input> <el-table :data="infoTableData" cell-style=原创 2020-12-30 22:57:01 · 2277 阅读 · 0 评论 -
Vue -- 通过 template 和 scope 控制表格中某一列根据值不同展现不同内容
<el-table-column prop="useState" :label="$t('columns.useState')" align="left" min-width="5" > <template slot-scope="scope"> <span v-if="scope.row.useState==0" style="color:#FF0000;"...原创 2020-05-03 11:00:41 · 1348 阅读 · 0 评论 -
Vue -- 如何固定 el-table 的表格高度
<div style="display:flex;position:relative;"> <el-table :data="infoTableData" cell-style="padding:6px" ref="infoTableData" border highlight-current-row> <el-table-column prop="resId" label="资源ID" align="left"></el-table-column>原创 2020-12-22 00:56:15 · 5987 阅读 · 0 评论