element table v-for动态隐藏列

已于 2023-01-30 11:19:37 修改
阅读量783 收藏 1
点赞数
文章标签： 前端 vue.js javascript
于 2023-01-30 11:07:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A7536/article/details/128798314
版权

element table v-for动态隐藏列

这个动态列是我项目中觉得比较好玩的一个功能，他列表不固定，后端数据库表也不固定，其实还有个高级筛选，这两个是配套使用的，
在这里插入图片描述

 <el-table
      ref="commonTable"
      :data="fundList"
      height="500px"
      border
      v-loading="loading"
    >
      <!-- @sort-change="handleSortChange" -->
      <template v-for="(item, index) in tableList">
        <el-table-column
          v-if="item.visible"
          :key="item.key"
          :width="width"
          :label="item.label"
          :align="item.type == 4 ? 'right' : ''"
          :prop="item.prop"
        >
          <!-- sortable="custom"
          :sort-orders="['desc', 'asc']" -->
          <template slot="header">
            <span class="left">{{ item.label }}</span>
            <span class="right">
              <i class="el-icon-view" @click.stop="hidden(index)"></i>
            </span>
          </template>
          <!-- type 1字典、4千分符、5时间 -->
          <template slot-scope="scope">
            <div v-if="item.type == 1">
              <span v-for="items in item.dict" :key="items.value">
                <span v-if="scope.row[item.prop] == items.value">{{
                  items.label
                }}</span>
              </span>
            </div>
            <div v-else-if="item.type == 4">
              <span v-if="scope.row[item.prop]">
                {{ qff(scope.row[item.prop]) }}
              </span>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </div>
            <div v-else-if="item.type == 5">
              {{ parseTime(scope.row[item.prop], "{y}-{m}-{d}") }}
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
      </template>
  
    </el-table>

//tableList数据格式是这样的，我是在前端改的数据格式，也可让后端整好直接用
tableList:[  {
        "dict": [
            {
                "value": "1",
                "label": "高端装备"
            },
            {
                "value": "2",
                "label": "新一代信息技术"
            },
            {
                "value": "3",
                "label": "新能源"
            },
            {
                "value": "4",
                "label": "新材料"
            },
            {
                "value": "5",
                "label": "现代海洋"
            },
            {
                "value": "6",
                "label": "医养健康"
            },
            {
                "value": "7",
                "label": "高端化工"
            },
            {
                "value": "8",
                "label": "现代高效农业"
            },
            {
                "value": "9",
                "label": "文化创意"
            },
            {
                "value": "10",
                "label": "精品旅游"
            },
            {
                "value": "11",
                "label": "现代金融服务"
            },
            {
                "value": "12",
                "label": "现代轻工纺织"
            },
            {
                "value": "13",
                "label": "基础设施"
            },
            {
                "value": "14",
                "label": "园区基金"
            },
            {
                "value": "15",
                "label": "创投类"
            },
            {
                "value": "16",
                "label": "军民融合"
            },
            {
                "value": "17",
                "label": "123"
            },
            {
                "value": "18",
                "label": "133"
            },
            {
                "value": "19",
                "label": "·134"
            }
        ],
        "dictType": "yd_base_touzxmqy_cylb",
        "key": "2e87bad02b41426ca2506da5e38a3eb5",
        "showCol": "1",
        "prop": "CYLB",
        "label": "产业类别",
        "visible": true,
        "sort": 1,
        "type": 1,
        "bmc": "yd_base_touzxmqy"
    },
    {
        "key": "69215fe7cc1741a2873566397a07070c",
        "showCol": null,
        "bmc": "yd_base_touzxmqy",
        "label": "主键",
        "sort": 1,
        "visible": false
    },
    {
        "dict": [
            {
                "value": "1",
                "label": "产业基金"
            },
            {
                "value": "2",
                "label": "创投基金"
            },
            {
                "value": "3",
                "label": "基础设施基金"
            },
            {
                "value": "4",
                "label": "园区基金"
            },
            {
                "value": "5",
                "label": "项目基金"
            },
            {
                "value": "6",
                "label": "参股中央基金"
            },
            {
                "value": "7",
                "label": "军民融合基金"
            }
        ],
        "dictType": "yd_base_jjlx",
        "key": "c6f5f22f6b2e489c96edc1471e87aec6",
        "showCol": "1",
        "prop": "JJLX",
        "label": "基金类型",
        "visible": true,
        "sort": 1,
        "type": 1,
        "bmc": "yd_base"
    },
    {
        "dict": [
            {
                "value": "1",
                "label": "初审阶段"
            },
            {
                "value": "2",
                "label": "尽调阶段"
            },
            {
                "value": "3",
                "label": "投资决策"
            },
            {
                "value": "4",
                "label": "协议谈判"
            },
            {
                "value": "5",
                "label": "已注册"
            },
            {
                "value": "6",
                "label": "已退出"
            }
        ],
        "dictType": "yd_dqjd",
        "key": "f3cf2f7d060a46218feb6ff8d3cf277e",
        "showCol": "1",
        "prop": "GQJD",
        "label": "当前阶段;标签",
        "visible": true,
        "sort": 1,
        "type": 1,
        "bmc": "yd_base"
    },
    {
        "key": "6ffdf1bbdc1941e995cc4e31411a219f",
        "showCol": null,
        "bmc": "yd_base",
        "label": "母基金ID",
        "sort": 2,
        "visible": false
    },
    {
        "key": "d2cc13f894e641539a9db355dd8b1658",
        "showCol": "1",
        "prop": "BASE_ID",
        "label": "基金ID",
        "visible": true,
        "bmc": "yd_base_touzxmqy",
        "sort": 2,
        "type": 2
    },
    {
        "key": "1b796d54244c422ca0d75bf1fa311972",
        "showCol": "1",
        "prop": "QY_ID",
        "label": "企业表ID",
        "visible": true,
        "bmc": "yd_base_touzxmqy",
        "sort": 3,
        "type": 2
    },
    {
        "key": "8825248bbd30419ea931a31c3bd1b79b",
        "showCol": "1",
        "prop": "GUANLJGNAME",
        "label": "管理机构名称",
        "visible": true,
        "bmc": "yd_base",
        "sort": 3,
        "type": 2
    },
    {
        "key": "47110b1d798342819ccb4349bf747313",
        "showCol": "1",
        "prop": "XMMC",
        "label": "项目名称",
        "visible": true,
        "bmc": "yd_base_touzxmqy",
        "sort": 4,
        "type": 2
    },
    {
        "key": "ab29f9f2fcd946449efdea0dafaaeccc",
        "showCol": "1",
        "prop": "JJMC",
        "label": "基金名称",
        "visible": true,
        "bmc": "yd_base_touzxmqy",
        "sort": 5,
        "type": 2
    },
    {
        "key": "cc37363438554ef68d60f86d66f89025",
        "showCol": "1",
        "prop": "TYXYDM",
        "label": "统一信用代码",
        "visible": true,
        "bmc": "yd_base",
        "sort": 5,
        "type": 2
    },
    {
        "key": "48dd791ce48e4c209a3265fbba87bd93",
        "showCol": "1",
        "prop": "QYMC",
        "label": "企业名称",
        "visible": true,
        "bmc": "yd_base_touzxmqy",
        "sort": 6,
        "type": 2
    },
 ]
 //fundList就是正常的table数据
fundList: [
  {
    "ZSZ": "",
    "ZCRQ": "2022-06-09T00:00:00",
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 50000,
    "GQJD": "1",
    "ZJNDJLR": "",
    "YDJJRJCZ": 50000,
    "JJZCD": "山东省青岛市崂山区",
    "JJSJCZ": 18000,
    "ZJNDSR": "",
    "JJRJCZ": 50000,
    "GUANLJG": "733bc888-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "山东省青岛市",
    "TZZE": "",
    "QYMC": "山东金东数字创意股份有限公司",
    "ID": "08c215a8ed544676b6b461ba552e129f",
    "CREATE_TIME": "2022-12-12T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东省财惠私募基金管理有限公司",
    "XMMC": "山东金东数字创意股份有限公司",
    "TZJG": "",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370212MA7D471GXW",
    "YDJJSJCZ": 18000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:23:37",
    "JJLX": "3",
    "BASE_ID": "08c215a8ed544676b6b461ba552e129f",
    "CYLB": "2",
    "JJMC": "山东动能嘉智产业投资基金合伙企业",
    "GSZCRQ": "2021-11-23T00:00:00",
    "CREATE_BY": "15168819180"
  },
  {
    "ZSZ": "",
    "ZCRQ": "2022-01-26T00:00:00",
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 50000,
    "GQJD": "1",
    "ZJNDJLR": "",
    "YDJJRJCZ": 50000,
    "JJZCD": "山东省青岛市崂山区",
    "JJSJCZ": 18000,
    "ZJNDSR": "",
    "JJRJCZ": 50000,
    "GUANLJG": "733bc888-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "山东省潍坊市",
    "TZZE": "",
    "QYMC": "山东浩信机械有限公司",
    "ID": "08c215a8ed544676b6b461ba552e129f",
    "CREATE_TIME": "2022-12-12T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东省财惠私募基金管理有限公司",
    "XMMC": "山东浩信机械有限公司",
    "TZJG": "",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370212MA7D471GXW",
    "YDJJSJCZ": 18000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:23:37",
    "JJLX": "3",
    "BASE_ID": "08c215a8ed544676b6b461ba552e129f",
    "CYLB": "2",
    "JJMC": "山东动能嘉智产业投资基金合伙企业",
    "GSZCRQ": "2021-11-23T00:00:00",
    "CREATE_BY": "15168819180"
  },
  {
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 100000,
    "GQJD": "1",
    "YDJJRJCZ": 20000,
    "JJZCD": "山东省德州市齐河县",
    "JJSJCZ": 100000,
    "JJRJCZ": 200000,
    "GUANLJG": "1",
    "STATUS": "2",
    "ZCDZ": "山东省德州市",
    "XMSJ1": "2019-12-01T00:00:00",
    "XMSJ2": "202012",
    "ID": "0ad83546d9504dfdac447c2b481d62ae",
    "CREATE_TIME": "2022-11-23T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "XMMC": "山东省坤河旅游开发有限公司齐河博物馆群项目",
    "UPDATE_BY": "admin",
    "TYXYDM": " 91371425MA3R7F7L28",
    "YDJJSJCZ": 20000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:45:13",
    "JJLX": "3",
    "BASE_ID": "0ad83546d9504dfdac447c2b481d62ae",
    "CYLB": "9",
    "JJMC": "齐河兴黄股权投资基金合伙企业",
    "JJZGM": 200000,
    "GSZCRQ": "2019-12-13T00:00:00",
    "CREATE_BY": "15168819180",
    "SJ2": "202107",
    "SJ1": "2019-12-01T00:00:00"
  },
  {
    "ZSZ": "",
    "ZCRQ": "2022-06-27T00:00:00",
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 50000,
    "GQJD": "1",
    "ZJNDJLR": "",
    "YDJJRJCZ": 50000,
    "JJZCD": "山东省青岛市崂山区",
    "JJSJCZ": 18000,
    "ZJNDSR": "",
    "JJRJCZ": 50000,
    "GUANLJG": "733bc888-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "山东省东营市",
    "TZZE": "",
    "QYMC": "东营昆宇电源科技有限公司",
    "ID": "08c215a8ed544676b6b461ba552e129f",
    "CREATE_TIME": "2022-12-12T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东省财惠私募基金管理有限公司",
    "XMMC": "东营昆宇电源科技有限公司",
    "TZJG": "",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370212MA7D471GXW",
    "YDJJSJCZ": 18000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:23:37",
    "JJLX": "3",
    "BASE_ID": "08c215a8ed544676b6b461ba552e129f",
    "CYLB": "2",
    "JJMC": "山东动能嘉智产业投资基金合伙企业",
    "GSZCRQ": "2021-11-23T00:00:00",
    "CREATE_BY": "15168819180"
  },
  {
    "ZCRQ": "2021-12-30T00:00:00",
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 50000,
    "GQJD": "1",
    "YDJJRJCZ": 50000,
    "JJZCD": "山东省青岛市崂山区",
    "JJSJCZ": 18000,
    "JJRJCZ": 50000,
    "GUANLJG": "733bc888-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "济南市",
    "QYMC": "山东和普威视光电股份有限公司",
    "ID": "08c215a8ed544676b6b461ba552e129f",
    "CREATE_TIME": "2022-12-12T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东省财惠私募基金管理有限公司",
    "XMMC": "山东和普威视光电股份有限公司",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370212MA7D471GXW",
    "YDJJSJCZ": 18000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:23:37",
    "JJLX": "3",
    "BASE_ID": "08c215a8ed544676b6b461ba552e129f",
    "CYLB": "2",
    "JJMC": "山东动能嘉智产业投资基金合伙企业",
    "GSZCRQ": "2021-11-23T00:00:00",
    "CREATE_BY": "15168819180"
  },
  {
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 20522.53,
    "GQJD": "1",
    "YDJJRJCZ": 1074.86,
    "JJZCD": "山东省济南市自由贸易试验区",
    "JJSJCZ": 20522.53,
    "JJRJCZ": 20522.53218,
    "GUANLJG": "733c8321-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "山东省菏泽市",
    "JJZT": "1",
    "JJJD": "1",
    "QYMC": "中铁濮新（菏泽）高速公路有限公司",
    "XMSJ1": "2020-10-22T00:00:00",
    "ID": "0dcfc00d3c8a4c54a000fd10a6ca29a5",
    "CREATE_TIME": "2022-11-23T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "XMMC": "中铁濮新（菏泽）高速公路有限公司",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370100MA3R34AWXK",
    "YDJJSJCZ": 1074.86,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:48:35",
    "JJLX": "1",
    "BASE_ID": "0dcfc00d3c8a4c54a000fd10a6ca29a5",
    "CYLB": "13",
    "JJMC": "山东省新旧动能转换基础设施基金合伙企业",
    "JJZGM": 300000,
    "GSZCRQ": "2019-11-27T00:00:00",
    "CREATE_BY": "15168819180",
    "SJ1": "2019-12-01T00:00:00"
  },
  {
    "ZCRQ": "2021-12-31T00:00:00",
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 50000,
    "GQJD": "1",
    "YDJJRJCZ": 50000,
    "JJZCD": "山东省青岛市崂山区",
    "JJSJCZ": 18000,
    "JJRJCZ": 50000,
    "GUANLJG": "733bc888-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "济南市",
    "QYMC": "山东舜丰生物科技有限公司",
    "ID": "08c215a8ed544676b6b461ba552e129f",
    "CREATE_TIME": "2022-12-12T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东省财惠私募基金管理有限公司",
    "XMMC": "山东舜丰生物科技有限公司",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370212MA7D471GXW",
    "YDJJSJCZ": 18000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:23:37",
    "JJLX": "3",
    "BASE_ID": "08c215a8ed544676b6b461ba552e129f",
    "CYLB": "2",
    "JJMC": "山东动能嘉智产业投资基金合伙企业",
    "GSZCRQ": "2021-11-23T00:00:00",
    "CREATE_BY": "15168819180"
  },
  {
    "ZSZ": "",
    "ZCRQ": "2022-04-07T00:00:00",
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 50000,
    "GQJD": "1",
    "ZJNDJLR": "",
    "YDJJRJCZ": 50000,
    "JJZCD": "山东省青岛市崂山区",
    "JJSJCZ": 18000,
    "ZJNDSR": "",
    "JJRJCZ": 50000,
    "GUANLJG": "733bc888-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "山东省济南市",
    "TZZE": "",
    "QYMC": "济南金威刻科技发展有限公司",
    "ID": "08c215a8ed544676b6b461ba552e129f",
    "CREATE_TIME": "2022-12-12T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东省财惠私募基金管理有限公司",
    "XMMC": "济南金威刻科技发展有限公司",
    "TZJG": "",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370212MA7D471GXW",
    "YDJJSJCZ": 18000,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-05T14:23:37",
    "JJLX": "3",
    "BASE_ID": "08c215a8ed544676b6b461ba552e129f",
    "CYLB": "2",
    "JJMC": "山东动能嘉智产业投资基金合伙企业",
    "GSZCRQ": "2021-11-23T00:00:00",
    "CREATE_BY": "15168819180"
  },
  {
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 24200,
    "GQJD": "3",
    "YDJJRJCZ": 6000,
    "JJZCD": "山东省烟台市高新区",
    "JJSJCZ": 18160,
    "JJRJCZ": 24200,
    "GUANLJG": "733c8321-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "山东省烟台市",
    "YDJJQRCZRQ": "2022-12-30T00:00:00",
    "JJZT": "1",
    "JJJD": "1",
    "QYMC": "烟台金润核电材料股份有限公司",
    "XMSJ1": "2021-09-01T00:00:00",
    "ID": "03b98549d110458e8d0364fe14c78d19",
    "CREATE_TIME": "2022-11-25T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东洪泰富源资本管理有限公司",
    "XMMC": "烟台金润核电材料股份有限公司",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370600MA3N35PB2H",
    "YDJJSJCZ": 4800,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-28T16:49:54",
    "JJLX": "2",
    "BASE_ID": "03b98549d110458e8d0364fe14c78d19",
    "CYLB": "15",
    "JJMC": "烟台多盈新动能投资中心",
    "JJZGM": 0,
    "GSZCRQ": "2018-05-07T00:00:00",
    "CREATE_BY": "15168819180",
    "SJ1": "2020-07-01T00:00:00"
  },
  {
    "GSJJFZBS": "新闻宣传组",
    "JJSQGM": 24200,
    "GQJD": "3",
    "YDJJRJCZ": 6000,
    "JJZCD": "山东省烟台市高新区",
    "JJSJCZ": 18160,
    "JJRJCZ": 24200,
    "GUANLJG": "733c8321-869f-11ed-87ab-04d4c4778e3a",
    "STATUS": "2",
    "ZCDZ": "江苏省苏州市",
    "YDJJQRCZRQ": "2022-12-30T00:00:00",
    "JJZT": "1",
    "JJJD": "1",
    "QYMC": "苏州晟济药业有限公司",
    "XMSJ1": "2021-04-22T00:00:00",
    "ID": "03b98549d110458e8d0364fe14c78d19",
    "CREATE_TIME": "2022-11-25T00:00:00",
    "DEPT_ID": "1600002263005478914",
    "GSJJFZR": "张三",
    "GUANLJGNAME": "山东洪泰富源资本管理有限公司",
    "XMMC": "苏州晟济药业有限公司",
    "UPDATE_BY": "admin",
    "TYXYDM": "91370600MA3N35PB2H",
    "YDJJSJCZ": 4800,
    "DEL_FLAG": "0",
    "UPDATE_TIME": "2023-01-28T16:49:54",
    "JJLX": "2",
    "BASE_ID": "03b98549d110458e8d0364fe14c78d19",
    "CYLB": "15",
    "JJMC": "烟台多盈新动能投资中心",
    "JJZGM": 0,
    "GSZCRQ": "2018-05-07T00:00:00",
    "CREATE_BY": "15168819180",
    "SJ1": "2020-07-01T00:00:00"
  }
]
唐飞滚滚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
element-ui 中的table的列隐藏问题解决
10-18
主要介绍了element-ui 中的table的列隐藏问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue中Element Table表格隐藏列
热门推荐
m0_37835906的博客
04-04 6万+
我们在table中添加数据时，有时需要隐藏一些页面不需要看到但必须存在的列。这时我们就需要把这列进行隐藏操作(比如记录id)。 在对应列声明中，加入 v-if=“show”（红线标注的地方） 在date()的return中声明 show: false,(红线标注部分)此时页面加载的时候会隐藏对应列。 ...
Element ui Table组件动态控制列的显示隐藏
qq_30193097的博客
09-01 3371
最近遇到一个需求，要求可以动态控制 table 列表中的列的显示与隐藏，并且将选中的列进行存储，下次进入页面仍展示上次勾选的列。可以将日期列选中，在列表中进行展示。默认只展示姓名和地址列。
vue element ui table表格--实现列的显示与隐藏
王二的博客
01-09 4491
vue element ui table表格 -- 实现列的显示与隐藏
element表格组件隐藏某个列
weixin_44132327的博客
07-22 7175
前端表格组件中想隐藏某个列的需求 #今天工作遇到了一个这样的需求.根据特定的条件,想要隐藏某些列,这种定制化的需求.话不多说,直接上代码 <el-table-column align="center" prop="startDate" width="120" label="开始日期"> </el-table-column&
el-table控制列的显示与隐藏
weixin_42375707的博客
06-24 1万+
el-table控制列的显示与隐藏
el-table 列的动态显示与隐藏
一起加油吧~
12-23 1万+
当我们在对表格数据查看的时候，可能某些列的数据是当前想要重点关注的，而某些列并不需要展示出来，我们就可以通过对表格的列进行实时的一个切换去实现动态的显示与隐藏。
ElementUI的el-table怎样隐藏某一列
BADAO_LIUMANG_QIZHI的博客
07-29 3万+
场景 使用el-table进行数据的展示时，某些列不需要展示，但是需要其存在。 比如查询数据时要获取对象的ID属性，在展示时不需要展示ID这一列， 但是在进行编辑时需要获取该ID。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 可以通过在el-table-column上添加 v-if="false" 来实现 完整示例代码 <el-table v-...
给el-table实现列显隐
Anonymous996的博客
07-26 5205
自定义el-table，实现列显隐
VUE2/3:element ui table表格的显隐列（若依框架）
weixin_47194802的博客
01-11 3667
若依框架自带一个组件，封装了关于表格，展示和隐藏表格列的功能；使用效果就是这样的，在表格上面，三个框，从左到右分别是隐藏上面搜索，刷新列表，和显隐列的功能；
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k...
使用 Element UI Table 的 slot-scope方法
10-16
主要介绍了使用 Element UI Table 的 slot-scope方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue中控制element表格列的显示与隐藏
夏天的博客
07-06 2136
vue中控制element表格列的显示与隐藏
el-table 表格列实现动态显示与隐藏
神夜空间
03-08 1万+
el-table 表格列实现动态隐藏显示 通常一个表格横向展示的时候，字段过多，但是我们又想要只显示部份字段，这时可以使用本组件实现你想要的效果。 1、实现原理：通过给列添加v-if来实现动态显示与隐藏效果 一、编写列显示与隐藏控制组件 <template> <div> <el-dialog title="自定义列" class="column-dialog" :visible.sync="dialogVisible">
element Table表格隐藏列
我的博客
05-27 1587
在el-table-column上添加：v-if="false" <el-table v-loading="loading" :data="bczglList" @selection-change="handleSelectionChange"> <el-table-column label="id" align="center" prop="id" v-if="false" /> <el-table-column label="编号" alig
vue3+element-plus+ts elplus table 实现表格动态列 表格列显示与隐藏的动态控制
yuey0809的博客
05-26 9244
工作接了个需求，需要实现表格的动态列，但是后端又不参与，全权交给前端，百度搜了一下，大多都是的for循环，我觉得用起来不爽，还得改变的书写方式，用对象保存列的相关信息，所以搞了一个这玩应话不多讲，上代码哦，不对，先上效果 动态图没做过，见谅吧简介： ProjectTable组件内容 store仓库 index.ts文件 getters.ts文件 table.ts文件 Home页面 总结 这玩应在使用时除了引用ColumnControl和ProjectTable两个组件以外，与你普通书写el-
记录一次前端页面崩溃的产生及处理
最新发布
weixin_51123079的博客
05-30 394
记录一次前端页面崩溃的产生及处理
element ui table v-for循环
03-16
element ui table组件可以使用v-for循环来渲染表格数据。通过在table组件中使用v-for指令，可以将数据数组中的每个对象渲染为一行表格数据。同时，可以使用table-column组件来定义每列的数据和样式。例如： <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> 其中，tableData是一个包含多个对象的数组，每个对象包含name、age和gender属性。prop属性指定了每列对应的数据属性，label属性指定了列的标题。通过这种方式，可以使用v-for循环来动态渲染表格数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

唐飞滚滚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值