element table 自定义列

最新推荐文章于 2024-08-08 14:22:16 发布

weixin_45945615

最新推荐文章于 2024-08-08 14:22:16 发布

阅读量1.1k

点赞数

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_45945615/article/details/111523565

版权

本文介绍了在Vue.js项目中，如何利用Element UI组件库实现表格列的自定义，包括数据展示、交互和样式调整等，帮助提升用户界面的灵活性和用户体验。

摘要由CSDN通过智能技术生成

个人思路保存…

<template>
  <el-dialog v-if="dialogVisible" style="min-height: 800px" title="自定义列" :visible.sync="dialogVisible" min-width="400px" width="40%"
    :before-close="handleClose">
    <div class="col-flex">
      <div class="col-nav">
        <a :class="isActive === index? 'active' : ''" :href="`#${item.name}`" @click="colorClick(index)" v-for="(item, index) in checkedArr"
          :key="index">{
   {
    item.name }}</a>
      </div>
      <div class="col-main">
        <el-scrollbar style="height: 300px;">
          <div :id="item.name" class="col-checkbox" v-for="(item, index) in checkedArr" :key="item.name">
            <el-checkbox :indeterminate="indeArr[index]" v-model="checkAll[index]" @change="val => handleCheckAllChange(val, index)">
              {
   {
    item.name }}</el-checkbox>
            <div style="margin: 10px 0;"></div>
            <el-checkbox-group v-model="checks[index]" @change="value => handleCheckedCitiesChange(value, index)">
              <el-row :gutter="20">
                <el-col style="margin-top: 15px" :span="7" v-for="(item2, j) in item.cols" :key="j">
                  <el-checkbox :value="item2" :label="item2">{