devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

el-table表格封装(包括switch，操作栏，元素带点击事件，区分颜色显示，分页，暂无数据等)_el-table 封装

作者：小小林熬夜学编程 | 2024-05-25 10:11:06

赞

踩

el-table 封装

效果图（字段较多，所以分段截图展示）：

表格组件public-table.vue

  1. <template>
  2.   <div class="public-table">
  3.     <!-- 具体使用方法参考public-table-demo.vue -->
  4.     <div class="list-table-cont">
  5.       <div class="list-table">
  6.         <el-table
  7.           @selection-change="handleSelectionChange"
  8.           :data="tableData"
  9.           :stripe="false"
  10.           :border="false"
  11.           :fit="true"
  12.           :show-header="true"
  13.           :highlight-current-row="true"
  14.           v-loading="columObj.loading"
  15.           :row-class-name="tableRowClassName"
  16.           class="public-table-cont"
  17.         >
  18.           <!-- 选择框是否开启，selectable控制是否单行禁用 -->
  19.           <el-table-column
  20.             v-if="columObj.selection"
  21.             type="selection"
  22.             :selectable="columObj.selectable"
  23.             width="60"
  24.           />
  25.           <!-- 普通列 -->
  26.           <el-table-column
  27.             v-for="(column, columIndex) in columObj.columnData"
  28.             :key="columIndex"
  29.             :prop="column.prop"
  30.             :label="column.label"
  31.             :minWidth="column.width"
  32.             :fixed="column.fixed"
  33.             :align="column.align || 'left'"
  34.             :sortable="column.sortable"
  35.             :index="columIndex"
  36.             show-overflow-tooltip
  37.           >
  38.             <template slot="header">
  39.               {{ column.label }}
  40.               <el-popover
  41.                 v-show="column.isQuestion"
  42.                 placement="top-start"
  43.                 title=""
  44.                 width="200"
  45.                 trigger="hover"
  46.                 :content="column.questionCont"
  47.               >
  48.                 <i class="el-icon-question" slot="reference"></i>
  49.               </el-popover>
  50.             </template>
  51.             <template slot-scope="{ row, $index }">
  52.               <!-- 默认数据展示，类型为text:true -->
  53.               <span
  54.                 v-if="column.text && column.editRow != $index"
  55.                 :style="`color:${column.textColor}`"
  56.               >
  57.                 {{ row[column.prop] || '—' }}
  58.               </span>
  59.               <!-- 对象展示，类型为status:true -->
  60.               <span v-if="column.status && row[column.prop]">{{
  61.                 row[column.prop].msg || '—'
  62.               }}</span>
  63.               <!-- 自定义内容,数据需要通过自己特殊处理的，类型为slot:true -->
  64.               <slot v-if="column.slot" :name="row[column.prop]" :row="row">
  65.                 <span v-html="column.format(row, $index)"></span>
  66.               </slot>
  67.               <!-- 自定义格式返回，比如状态，时间拼接等，类型为ownDefined:true-->
  68.               <span v-if="column.ownDefined" :style="column.formatColor && column.formatColor(row)">
  69.                 {{ column.format(row, $index) || '—' }}
  70.               </span>
  71.               <!--数据有点击事件，可进行点击跳转，弹框等操作,类型为clickable：true -->
  72.               <span
  73.                 v-if="column.clickable"
  74.                 :class="column.textClass"
  75.                 @click="column.itemClick(row, $index)"
  76.                 class="click-style"
  77.               >
  78.                 {{ column.format(row, $index) || '—' }}
  79.               </span>
  80.               <!-- 返回的数据是简单的数组，类型为isArray：true -->
  81.               <span v-if="column.isArray">
  82.                 <span v-for="(item, index) in row[column.prop]" :key="index">
  83.                   {{ row[column.prop].length - 1 !== index ? item + '，' : item || '—' }}
  84.                 </span>
  85.               </span>
  86.               <!-- 既有默认的返回数据，又有自定义的可点击内容，类型为textClick:true -->
  87.               <span v-if="column.textClick">
  88.                 <span>{{ row[column.prop] || '—' }}</span>
  89.                 <span class="blue-line">|</span
  90.                 ><span
  91.                   class="click-style"
  92.                   @click="column.itemClick(row, $index)"
  93.                   :class="column.textClass"
  94.                   >{{ column.textCont || '—' }}</span
  95.                 >
  96.               </span>
  97.               <!-- switch开关,打开时值为true ，关闭时值为false  -->
  98.               <el-switch
  99.                 v-if="column.switch"
  100.                 v-model="row[column.prop]"
  101.                 :inactive-text="row[column.prop] ? column.openText : column.closeText"
  102.                 @change="switchChange(row, $index)"
  103.               />
  104.               <!-- switch开关,打开时值为1 ，关闭时值为0 -->
  105.               <el-switch
  106.                 v-if="column.switchNum"
  107.                 :active-value="1"
  108.                 :inactive-value="0"
  109.                 v-model="row[column.prop]"
  110.                 :inactive-text="row[column.prop] ? column.openText : column.closeText"
  111.                 @change="switchChange(row, $index)"
  112.               />
  113.  
  114.               <!-- 单个图片展示，类型为image:true -->
  115.               <div class="logo-box flex-column-center-center" v-if="column.image">
  116.                 <el-image
  117.                   class="logo"
  118.                   :class="column.imgStyle"
  119.                   :src="row[column.prop]"
  120.                   :preview-src-list="[row[column.prop]]"
  121.                   alt="图片"
  122.                 />
  123.               </div>
  124.               <!-- 图片数组 -->
  125.               <div class="logo-box flex-column-center-center" v-if="column.imageArr">
  126.                 <el-image
  127.                   class="logo"
  128.                   :class="column.imgStyle"
  129.                   v-if="row[column.prop].length > 0"
  130.                   :src="row[column.prop][0]"
  131.                   :preview-src-list="row[column.prop]"
  132.                   alt="图片"
  133.                 />
  134.               </div>
  135.               <!-- 操作按钮 -->
  136.               <span
  137.                 v-show="column.isOperation"
  138.                 v-for="(operations, index) in column.operation"
  139.                 :key="index"
  140.               >
  141.                 <el-button
  142.                   :icon="operations.icon"
  143.                   :type="operations.type"
  144.                   @click="operations.buttonClick(row, $index)"
  145.                   :class="
  146.                     operations.format && operations.format(row)
  147.                       ? operations.disabledClass
  148.                       : operations.styleClass
  149.                   "
  150.                   :disabled="operations.format && operations.format(row)"
  151.                   size="small"
  152.                   >{{ operations.label }}</el-button
  153.                 >
  154.                 <span v-show="operations.dividerLine" class="divider-line">|</span>
  155.               </span>
  156.             </template>
  157.           </el-table-column>
  158.           <!-- 自定义操作栏，与isOperation不能同时存在-->
  159.           <slot name="tableOperations"></slot>
  160.           <!-- 暂无数据 -->
  161.           <div slot="empty" class="empty">
  162.             <img :src="`${ASSET_HOST}/event/activity_null.png`" />
  163.             <span>暂无数据</span>
  164.           </div>
  165.         </el-table>
  166.       </div>
  167.       <!-- 分页 -->
  168.       <!-- noPagination为true时不显示分页，默认为false，可不传此参数 -->
  169.       <div class="pagination-panel flex-end" v-show="!columObj.noPagination">
  170.         <div class="total-pages">
  171.           共
  172.           <span>{{ pageObj.total }}</span> 条数据
  173.         </div>
  174.         <div class="total-pages" :style="{ textAlign: pageObj.position || 'center' }">
  175.           <el-pagination
  176.             @size-change="handleSizeChange"
  177.             @current-change="handleCurrentChange"
  178.             :current-page="pageObj.page"
  179.             :page-size="pageObj.pageSize"
  180.             layout="sizes, prev, pager, next,jumper"
  181.             :total="pageObj.total"
  182.           >
  183.           </el-pagination>
  184.         </div>
  185.       </div>
  186.     </div>
  187.   </div>
  188. </template>
  189.  
  190. <script>
  191. export default {
  192.   name: 'public-table', //共用table组件
  193.   directives: {
  194.     // 自定义指令,用于可编辑input自动获取焦点
  195.     focus: {
  196.       inserted: function (e) {
  197.         e.querySelector('input').focus();
  198.       },
  199.     },
  200.   },
  201.   props: {
  202.     tableData: {
  203.       type: Array,
  204.       required: true,
  205.     },
  206.     columObj: {
  207.       type: Object,
  208.       required: true,
  209.     },
  210.     //columObj.type(如果为""空，就不会加载多选框，或者index编号),lazy(是否支持懒加载)
  211.     //columnData.columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
  212.     //prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
  213.     //如果为操作列,则需要填写需要的操作按钮,类型为Object。type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色),buttonClick为点击后调用的方法名称
  214.     pageObj: {
  215.       type: Object,
  216.       required: true,
  217.     },
  218.   },
  219.  
  220.   methods: {
  221.     // switchChange调用
  222.     switchChange(row, $index, prop) {
  223.       this.$emit('switchChange', row, $index, prop);
  224.     },
  225.     // 帮助点击行，获取点击的下标
  226.     tableRowClassName({ row, rowIndex }) {
  227.       row.rowIndex = rowIndex;
  228.     },
  229.    // 选择的数据
  230.     handleSelectionChange(val) {
  231.       this.$emit("handleSelectionChange", val);
  232.     },
  233.     // 条数变化
  234.     handleSizeChange(e) {
  235.       this.$emit('handleSizeChange', e);
  236.     },
  237.     // 页码变化
  238.     handleCurrentChange(e) {
  239.       this.$emit('handleCurrentChange', e);
  240.     },
  241.   },
  242. };
  243. </script>
  244. <style lang='scss' scoped>
  245. .public-table {
  246.   .el-button {
  247.     margin: 0 6px;
  248.   }
  249.   .text-underline {
  250.     text-decoration: underline;
  251.   }
  252.   .click-style {
  253.     cursor: pointer;
  254.   }
  255.   .text-color {
  256.     color: #0064ff;
  257.   }
  258. .red-text {
  259.   color: red !important;
  260. }
  261.  
  262. .blue-text {
  263.   color: rgba(0, 100, 255, 1) !important;
  264. }
  265.  
  266. .disabled-text {
  267.   color: #999 !important;
  268. }
  269.   /deep/ .el-input__inner {
  270.     border: none;
  271.   }
  272.  
  273.   /deep/ .el-image__inner {
  274.     height: 50px;
  275.   }
  276.   // switch左边文字颜色
  277.   /deep/ .el-switch__label--left {
  278.     color: #606266;
  279.   }
  280. .flex-column-center-center {
  281.   display: flex;
  282.   flex-direction: column;
  283.   align-items: center;
  284.   justify-content: center;
  285. }
  286.   .logo-box {
  287.     width: 50px;
  288.     height: 50px;
  289.     /deep/.el-image__inner {
  290.       height: auto !important;
  291.     }
  292.     .logo {
  293.       width: 50px;
  294.       height: 50px;
  295.       display: inline-block;
  296.       object-fit: cover;
  297.     }
  298.     .logo-style {
  299.       height: 40px !important;
  300.     }
  301.     .logo-list-style {
  302.       width: 80px !important;
  303.       height: 80px !important;
  304.     }
  305.   }
  306. }
  307. </style>

public-table-demo.vue页面引用组件 

  1. <template>
  2.   <div class="public-table-demo">
  3.     <div class="public-table-demo-titles flex-between">
  4.       <div class="public-table-demo-titles-left">封装表格使用示例</div>
  5.     </div>
  6.     <div class="public-table-demo-cont">
  7.       <!-- 表格(直接复制这个组件到对应文件) -->
  8.       <public-table
  9.         :tableData="tableData"
  10.         :columObj="columObj"
  11.         :pageObj="pageObj"
  12.         @switchChange="switchChange"
  13.         @handleSelectionChange="handleSelectionChange"
  14.         @handleSizeChange="handleSizeChange"
  15.         @handleCurrentChange="handleCurrentChange"
  16.       >
  17.  
  18.         <!-- 放开注释代码并删除columnData中的isOperation为true的操作列则为自定义操作栏 -->
  19.         <!-- <div slot="tableOperations">
  20.           <el-table-column prop="status" width="200" fixed="right" label="操作">
  21.             <template slot-scope="scope">
  22.               <el-button
  23.                 type="text"
  24.                 size="small"
  25.                 @click.native="editBanner(scope.row)"
  26.                 >编辑</el-button
  27.               >
  28.             </template>
  29.           </el-table-column>
  30.         </div> -->
  31.      
  32. </public-table>
  33.     </div>
  34.   </div>
  35. </template>
  36.   
  37.   <script>
  38. export default {
  39.   name: 'public-table-demo',
  40.   components: {
  41.     publicTable: () => import('@/components/common/public-table.vue'),
  42.   },
  43.   data() {
  44.     return {
  45.       tableData: [
  46.         {
  47.           cont: '普通数据',
  48.           setColor: '设置为蓝色',
  49.           isQuestion: '标题带问号',
  50.           logo: 'https://tuoluohuodong.oss-cn-shang hai.aliyuncs.com/digital_system/tuoluoicon.png',
  51.           logoList: [
  52.             'https://tuoluohuodong.oss-cn-shang hai.aliyuncs.com/digital_system/30841d9826d04081961102138d606ac3.jpeg',
  53.             'https://tuoluohuodong.oss-cn-shang hai.aliyuncs.com/digital_system/8e696633c92249ce806d417c26c630f5.jpeg',
  54.           ],
  55.           isOpenSwitch: true,
  56.           isOpenSwitchNum: 0,
  57.           status: 1,
  58.           startTime: '2022-03-31 00:00:00',
  59.           endTime: '2023-03-31 00:00:00',
  60.           sex: 1,
  61.           booth: null,
  62.           exhibition: null,
  63.           clickValue: '可点击跳转',
  64.           productInfoVOList: [
  65.             { id: '3523435726235345363', productSn: '419225611403', auditStatus: 1 },
  66.             { id: '3523435726235345364', productSn: '673929573648', auditStatus: 2 },
  67.           ],
  68.           venueVal: ['B', 'C', 'C'],
  69.           numDetail: 99,
  70.           objmsg: {
  71.             msg: '对象啊',
  72.           },
  73.         },
  74.         {
  75.           cont: '普通数据',
  76.           setColor: '设置为蓝色',
  77.           isQuestion: '标题带问号',
  78.           logo: 'https://tuoluohuodong.oss-cn-shang hai.aliyuncs.com/digital_system/tuoluoicon.png',
  79.           logoList: [
  80.             'https://tuoluohuodong.oss-cn-shang hai.aliyuncs.com/digital_system/d49e5941cc834a28ad0b3cd730bf01ea.jpg',
  81.             'https://tuoluohuodong.oss-cn-shang hai.aliyuncs.com/digital_system/b03a4a6605f540ae9148c008a7bc8193.jpg',
  82.           ],
  83.           isOpenSwitch: false,
  84.           isOpenSwitchNum: 1,
  85.           status: 2,
  86.           startTime: '2022-03-01 12:00:00',
  87.           endTime: '2023-03-01 18:00:00',
  88.           sex: 2,
  89.           booth: '展馆号',
  90.           exhibition: '展位号',
  91.           clickValue: '可点击跳转',
  92.           productInfoVOList: [
  93.             { id: '3578388750457094201', productSn: '019109210492', auditStatus: -1 },
  94.           ],
  95.           venueVal: ['A', 'C', 'D'],
  96.           numDetail: 10,
  97.           objmsg: {
  98.             msg: '对象啊',
  99.           },
  100.         },
  101.       ], //列表数据
  102.  
  103.       columObj: {
  104.         selection: true, // 是否显示选择框
  105.         // noPagination:true,//是否显示分页（为true不显示，默认显示分页则不需要此参数）
  106.         /***
  107.          * column列,
  108.          * columType(列类型,可选text(默认为普通文字模式),
  109.          * switch(switch开关,后台返回false或true),
  110.          * switchNum(switch开关,后台返回0或1),
  111.          * image(图片),
  112.          * operation(操作按钮)
  113.          * textColor(文本颜色，不传则是默认颜色)
  114.          * ownDefined(自定义返回内容)
  115.          * clickable（内容可点击操作）
  116.          * isArray（数组）
  117.          * textClick（又有普通内容又有可点击操作内容）
  118.          ***/
  119.         /***
  120.          * prop(参数),
  121.          * label(列名),
  122.          * width(宽度),
  123.          * align(对齐方式，默认左对齐),
  124.          * sortable(是否支持排序)
  125.          * format（自定义值）
  126.          * formatColor（自定义值的颜色，需要则设置）
  127.          * textClass（样式设置）
  128.          * itemClick（内容点击事件）
  129.          * textCont（有点击事件的固定内容）
  130.          ***/
  131.         columnData: [
  132.           {
  133.             text: true,
  134.             prop: 'cont',
  135.             label: '默认',
  136.             width: '150',
  137.           },
  138.           {
  139.             text: true,
  140.             textColor: '#0064ff',
  141.             prop: 'setColor',
  142.             label: '设置颜色',
  143.             width: '150',
  144.           },
  145.           {
  146.             text: true,
  147.             prop: 'isQuestion',
  148.             label: '显示问号',
  149.             width: '120',
  150.             isQuestion: true, //是否显示问号tips
  151.             questionCont: '提示内容啊啊', //问号显示的内容
  152.           },
  153.           {
  154.             image: true,
  155.             prop: 'logo',
  156.             label: 'logo展示',
  157.             width: '120',
  158.             imgStyle: 'logo-style',
  159.           },
  160.           {
  161.             imageArr: true,
  162.             prop: 'logoList',
  163.             label: '多张图',
  164.             width: '120',
  165.             imgStyle: 'logo-list-style',
  166.           },
  167.           {
  168.             switch: true,
  169.             prop: 'isOpenSwitch',
  170.             label: 'switch按钮（后台返回false或true）',
  171.             width: '300',
  172.           },
  173.           {
  174.             switchNum: true,
  175.             prop: 'isOpenSwitchNum',
  176.             label: 'switch按钮（后台返回0或1）',
  177.             width: '260',
  178.           },
  179.           {
  180.             ownDefined: true,
  181.             prop: 'status',
  182.             label: '状态(自定义颜色)',
  183.             width: '180',
  184.             format: (row) => {
  185.               let text = '';
  186.               switch (row.status) {
  187.                 case 1:
  188.                   text = '绿色';
  189.                   break;
  190.                 case 2:
  191.                   text = '黄色';
  192.                   break;
  193.                 default:
  194.                   return '—';
  195.               }
  196.               return text;
  197.             },
  198.             formatColor: (row) => {
  199.               switch (row.status) {
  200.                 case 1: {
  201.                   return { color: '#04b935' };
  202.                 }
  203.                 case 2: {
  204.                   return { color: '#ffab4f' };
  205.                 }
  206.                 default: {
  207.                   return { color: '#ee423d' };
  208.                 }
  209.               }
  210.             },
  211.           },
  212.           {
  213.             slot: true,
  214.             prop: 'productInfoVOList',
  215.             label: '数组',
  216.             width: '300',
  217.             format: (row) => {
  218.               const { productInfoVOList } = row;
  219.               const auditStatus = { '-1': '报名失败', 1: '报名成功', 2: '审核中' };
  220.               let rowEl = productInfoVOList.map((item) => {
  221.                 return `<div> ${item.productSn}(${auditStatus[item.auditStatus]})</div>`;
  222.               });
  223.               let rowElVal = rowEl.toString();
  224.               return rowElVal.replace(/,/g, ''); //去掉逗号
  225.             },
  226.           },
  227.           {
  228.             ownDefined: true,
  229.             prop: 'startTime',
  230.             label: '时间拼接',
  231.             width: '380',
  232.             format: (row) => {
  233.               return row.startTime + '~' + row.endTime;
  234.             },
  235.           },
  236.           {
  237.             ownDefined: true,
  238.             prop: 'sex',
  239.             label: '性别（后台返回1和2）',
  240.             width: '200',
  241.             format: (row) => {
  242.               let text = '';
  243.               switch (row.sex) {
  244.                 case 1:
  245.                   text = '男';
  246.                   break;
  247.  
  248.                 case 2:
  249.                   text = '女';
  250.                   break;
  251.  
  252.                 default:
  253.                   text = '—';
  254.               }
  255.               return text;
  256.             },
  257.           },
  258.           {
  259.             clickable: true,
  260.             prop: 'startTime',
  261.             itemClick: this.addBooth,
  262.             label: '两个字段且带点击事件',
  263.             width: '200',
  264.             textClass: 'text-underline',
  265.             format: (row) => {
  266.               return row.exhibition || row.booth
  267.                 ? `${row.exhibition || '暂无'} | ${row.booth || '暂无'}`
  268.                 : '点击设置展位';
  269.             },
  270.           },
  271.           {
  272.             clickable: true,
  273.             prop: 'clickValue',
  274.             itemClick: this.goUrl,
  275.             textClass: 'text-color',
  276.             label: '带点击事件',
  277.             width: '140',
  278.             format: (row) => {
  279.               return row.clickValue;
  280.             },
  281.           },
  282.           {
  283.             isArray: true,
  284.             prop: 'venueVal',
  285.             label: '数组',
  286.             width: '140',
  287.           },
  288.           {
  289.             textClick: true,
  290.             prop: 'numDetail',
  291.             itemClick: this.goPage,
  292.             textClass: 'text-color',
  293.             textCont: '点击的文案',
  294.             label: '内容与点击事件',
  295.             width: '180',
  296.           },
  297.           {
  298.             status: true,
  299.             prop: 'objmsg',
  300.             label: 'obj类型',
  301.             width: '140',
  302.           },
  303.  
  304.           /***
  305.            * 如果为操作列,则需要填写需要的操作按钮,类型为Object。
  306.            * type(按钮样式,参考el—botton类型),
  307.            * label(按钮文字)
  308.            * icon(参考el-icon),
  309.            * color(字体颜色),
  310.            * isShow(是否显示按钮),
  311.            * dividerLine(是否显示分隔线)
  312.            * styleClass(按钮样式，不传则为默认)
  313.            ***/
  314.           {
  315.             fixed: 'right',
  316.             isOperation: true,
  317.             label: '操作',
  318.             width: '140',
  319.             operation: [
  320.               {
  321.                 type: 'text',
  322.                 label: '编辑',
  323.                 icon: '',
  324.                 buttonClick: this.editTable,
  325.                 disabledClass: 'disabled-text ',
  326.                 dividerLine: true,
  327.                 format:(row) => {
  328.                   return row.sex==1
  329.                 },//禁用条件
  330.               },
  331.               {
  332.                 type: 'text',
  333.                 label: '删除',
  334.                 icon: '',
  335.                 styleClass: 'red-text',
  336.                 buttonClick: this.delTable,
  337.               },
  338.             ],
  339.           },
  340.         ],
  341.       },
  342.       pageObj: {
  343.         total: 0,
  344.         page: 1,
  345.         pageSize: 10,
  346.       }, //分页对象
  347.     };
  348.   },
  349.  
  350.   methods: {
  351.     // 设置占位
  352.     addBooth(row, $index) {
  353.       console.log(row, '设置');
  354.     },
  355.     // 跳转链接
  356.     goUrl(row, $index) {
  357.       console.log(row, '点击跳转');
  358.     },
  359.     // 跳转详情
  360.     goPage(row, $index) {
  361.       console.log(row, '跳转详情');
  362.     },
  363.     // 编辑事件
  364.     editTable(row, $index) {
  365.       console.log(row, $index, '编辑');
  366.     },
  367.     // 删除事件
  368.     delTable(row, $index) {
  369.       console.log(row, $index, '删除');
  370.     },
  371.     // 行改变事件
  372.     rowOperation(row, $index) {
  373.       console.log(row, $index);
  374.     },
  375.     // cahnge改变事件
  376.     switchChange(row, $index) {
  377.       console.log(row, $index, 'switch');
  378.     },
  379.     // 选中的条数
  380.     handleSelectionChange(val) {
  381.       console.log(val, "选中的数据");
  382.     },
  383.     // 获取数据的方法
  384.     getData() {},
  385.     // 改变页数
  386.     handleCurrentChange(val) {
  387.       this.pageObj.page = val;
  388.       this.getData();
  389.     },
  390.     // 改变页码
  391.     handleSizeChange(val) {
  392.       this.pageObj.pageSize = val;
  393.       this.getData();
  394.     },
  395.   },
  396. };
  397. </script>
  398.   <style lang='scss' scoped>
  399. .public-table-demo {
  400.   background: #ffffff;
  401.   padding: 0.32rem 0.2rem 0.16rem 0.2rem;
  402.   // border: 1px solid #dcdfe6;
  403.   border-radius: 4px;
  404.   .public-table-demo-titles-left {
  405.     font-size: 24px;
  406.     font-weight: bold;
  407.   }
  408. }
  409. </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/621610
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号