vue封装基础table表格

image.png

table组件具有的功能/特点：

1.table列有父组件动态创建
2.table列类型包含：序列行、复选列、普通数据展示列、单元格根据父组件要求动态渲染列（如操作列button、状态展示switch标签等）
3.分页功能

table功能实现解析

1.选择render函数还是采用template实现组件

render函数无法监听组件自定义事件，且标签层级不如template清晰，所以采用template封装
render函数一般用于标签层级较少，偏重逻辑的封装；比如input框
template用于n次封装，左后一层供用户使用封装，标签结构清晰，逻辑处理少

2.table列渲染：父组件传递列配置动态渲染列。包含实现序列和复选列的动态渲染，根据列配置type决定。

3.分页功能的实现：传递分页配置，table组件判断是否展示分页，一级分页的相关配置，如total等

table组件的使用

 <!-- 用户管理table -->
    <Table
      v-model="UserControlID"
      :dataSource="tableData"
      ref="tableUserControl"
      :objInformation="objInformation"
    >
 <!-- 控制列按钮 -->
      <template v-slot:default="slotProps">
        <div class="operation Flex between">
           <button class="newBtn borderRadius" @click="fn_Check(slotProps.item)">查 看</button>
           <button class="newBtn borderRadius" @click="fn_Amend(slotProps.item)" >修 改</button>
           <button class="newBtn borderRadius" @click="fn_Remove(slotProps.item)">删 除</button>
           <button class="newBtn borderRadius"  @click="fn_Copy">复 制</button>
        </div>
      </template>
    </Table>

import Table from "../Popout/Table.vue"; //table组件引入
 // table数据
  tableData: {
        //表头
        heads: [
          { name: "ID", show: false, key: "ID" },
          { name: "任务类型", show: false, key: "TaskType" },
          { name: "类别", key: "jobNo" },
          { name: "版本状态", show: true, key: "status" },
          { name: "名称", key: "name" },
          { name: "页面模块", key: "title" },
          { name: "路径", key: "userName" },
          { name: "权限相关", key: "doctorID" },
          { name: "开发人员", key: "inpatientArea" },
          { name: "预计工时", key: "time" },
        ],
        datas: [
          [
            {
              ID: 11,
              checked: false,
              doctorID: "id是", //权限相关
              TaskType: "接口任务", //任务类型
              inpatientArea: "研发人员1", //研发人员
              isAllInpatientArea: false,
              job: "是打发",
              jobNo: "废弃版本",
              status: "未开始", //状态
              name: "11_name第三", //名称
              title: "55df", //页面模块
              userName: "c/", //路径
              time: 23, //预计工时
              // key: "ID",
              key: 1,
            },
            {
              ID: 22,
              checked: false,
              doctorID: "50D57A17-9A84-4B5C-A5D1-347CE8FCF3F9",
              TaskType: "接口任务",
              inpatientArea: "asdfa",
              isAllInpatientArea: false,
              job: "44",
              jobNo: "内部管理",
              name: "12_name第二",
              status: "未完成",
              title: "af",
              userName: "d/",
              time: 2,
              key: 2,
              // key: "TaskType",
            },
          ],
        ],
      },
 // 表格控制列事件
 // 表格删除当前行
    fn_Remove(index) {
      this.Datas.splice(index, 1);
    },

table组件封装 HTML部分代码

    <div class="tableBox">
      <table class="data-table">
        <thead>
          <tr>
            <th>
              <div class="batch">
                <!-- 全选 -->
                <input type="checkbox" v-model="allChecked" @change="AllCheckedChange()" />
              </div>
            </th>
            <!-- 表头 -->
            <th v-for="item in dataSource.heads" :key="item.value">{{item.name}}</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 多选 -->
          <tr v-for="item in selectDatas" :key="item.key" :class="item.checked?'tr-active':''">
            <td>
              <input type="checkbox" v-model="item.checked" @change="CheckedChange(item)" />
            </td>
            <td v-for="part in dataSource.heads" :key="part.key">{{item[part.key]}}</td>
            <!-- table按钮 -->
            <td>
              <slot v-bind:item="item"></slot>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 列表无数据 -->
    <div class="noData" v-if="this.selectDatas.length==0">{{this.selectDatas.length==0?'无数据':''}}</div>

table组件的配置

//父组件的table数据
 props: ["dataSource", ]
 data() {
    return {
        allChecked: "", //全选
        checkList: [], //全选中数据
        selectDatas: [], //this.dataSource
        tableData: this.dataSource.datas,
  }
}

   // table全选
    AllCheckedChange() {
      this.checkList = []; //选中数据
      // this.tableData//原数据
      if (this.allChecked == true) {
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].checked = true;
          this.checkList.push(this.tableData[i]);
        }
      } else {
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].checked = false;
          this.checkList = [];
        }
      }
    },

table组件样式

// table盒子
.tableBox {
    width: 100%;
    overflow: auto;
    .tableCheck {
        width: 100%;
    }
    .div-table-container {
        width: 100%;
    }
}
// 无数据
.noData {
    text-align: center;
    line-height: 200px;
    font-weight: 700;
    font-size: 24px;
}
// 搜索下拉框
.serchBox {
    .yaw-radio-group {
        height: 30px;
        line-height: 30px;
    }
}
td {
    border-left: 1px solid #dae9ef !important;
    border-bottom: 1px solid #dae9ef !important;
}
th {
    display: table-cell !important;
}
.data-table {
    width: 100%;
    border-collapse: collapse !important;
}
.data-table thead {
    background-color: #DAE9EF;
    height: 40px;
}
.data-table thead th {
    height: 40px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    text-align: center !important;
}
.data-table tbody td {
    height: 40px;
    font-size: 14px;
    font-weight: normal;
    color: #666666;
    text-align: center;
}
.data-table tbody tr:hover {
    background-color: #EDF4F7;
}