devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于elementPlus二次封装可编辑表格组件_elementplus可编辑表格

作者：Gausst松鼠会 | 2024-06-11 03:55:32

赞

踩

elementplus可编辑表格

参考：vue3 二次封装element-plus 表格组件_vue3 + ts+elementui-plus 封装表格分页组件-CSDN博客

组件封装index.vue：

  1. <template>
  2.   <el-table
  3.     v-loading="listLoading"
  4.     :data="tableData"
  5.     element-loading-text="Loading"
  6.     fit
  7.     border
  8.     highlight-current-row
  9.     :max-height="maxHeight"
  10.     :cell-style="tableRowStyle"
  11.     @row-click="clickRow"
  12.     @selection-change="handleSelectionChange"
  13.     :border="true"
  14.     ref="table"
  15.     @cell-click="showUnitInput"
  16.   >
  17.     <el-table-column type="selection" width="55" />
  18.     <el-table-column
  19.       v-for="(item, index) in tableHeader"
  20.       :key="index"
  21.       :prop="item.prop"
  22.       align="center"
  23.       :label="item.label"
  24.       :min-width="item.minWidth"
  25.     >
  26.       <template #default="scope">
  27.         <!-- 按钮 -->
  28.         <div v-if="item.btn">
  29.           <el-button
  30.             v-for="(k, index) in item.btn"
  31.             :key="index"
  32.             size="small"
  33.             @click="k.func(scope.$index, scope.row)"
  34.             >{{ k.name }}</el-button
  35.           >
  36.         </div>
  37.         <!-- 图片 -->
  38.         <div v-else-if="item.type == 'img'">
  39.           <el-image
  40.             style="width: 100px; height: 100px"
  41.             :src="scope.row.image"
  42.             :fit="fit"
  43.           />
  44.         </div>
  45.         <!-- 数据字典转换 -->
  46.         <div v-else-if="item.type == 'dic'">
  47.           <!-- <el-link
  48.               v-if="item.isline == true"
  49.               :type="item.lineType(scope.row[item.prop])"
  50.               :underline="false"
  51.               >{{ item.formatData(scope.row[item.prop]) }}</el-link
  52.             > -->
  53.           <div v-for="(ite, index) in listData[item.prop]">
  54.             <el-link
  55.               v-if="scope.row[item.prop] == ite.key && item.isline == true"
  56.               :type="ite.type"
  57.               >{{ ite.value }}</el-link
  58.             >
  59.             <span v-else-if="scope.row[item.prop] == ite.key">{{
  60.               ite.value
  61.             }}</span>
  62.           </div>
  63.         </div>
  64.         <!-- 编辑 -->
  65.         <div v-else-if="item.type == 'edit'">
  66.           <input
  67.             type="text"
  68.             v-model="scope.row[item.prop]"
  69.             v-focus
  70.             v-if="
  71.               tableRowEditId === scope.row.id &&
  72.               tableColumnEditIndex === scope.column.id
  73.             "
  74.             @blur="blurUnitInput(row, column)"
  75.             @keyup.enter="blurUnitInput(row, column)"
  76.           />
  77.           <span v-else>{{ scope.row[item.prop] }}</span>
  78.         </div>
  79.         <!-- 日期拼接、普通字段 -->
  80.         <div v-else>
  81.           <span v-if="!item.formatData">
  82.             <span v-if="item.isDate == true"
  83.               >{{ repString(scope.row[item.prop[0]]) }}-{{
  84.                 repString(scope.row[item.prop[1]])
  85.               }}</span
  86.             >
  87.             <span v-else>{{ scope.row[item.prop] }}</span>
  88.           </span>
  89.           <span v-else>
  90.             <span>{{ scope.row[k.prop] }}</span>
  91.           </span>
  92.         </div>
  93.       </template>
  94.     </el-table-column>
  95.   </el-table>
  96.   <div class="demo-pagination-block">
  97.     <el-pagination
  98.       v-model:current-page="currentPage"
  99.       v-model:page-size="pageSize"
  100.       :page-sizes="[10, 20, 30, 50]"
  101.       :small="small"
  102.       :disabled="disabled"
  103.       :background="background"
  104.       layout="total, sizes, prev, pager, next, jumper"
  105.       :total="400"
  106.       @size-change="handleSizeChange"
  107.       @current-change="handleCurrentChange"
  108.       style="float: right"
  109.     />
  110.   </div>
  111. </template>
  112.  
  113. <script lang="ts">
  114. import { getCurrentInstance, ref } from "vue";
  115. export default {
  116.   props: {
  117.     tableData: {
  118.       type: Array,
  119.       default: () => [],
  120.     },
  121.     tableHeader: {
  122.       type: Array,
  123.       default: () => [],
  124.     },
  125.     listLoading: {
  126.       type: Boolean,
  127.       default: false,
  128.     },
  129.     maxHeight: {
  130.       type: String,
  131.       default: "",
  132.     },
  133.     listData: {
  134.       type: Object,
  135.       default: {},
  136.     },
  137.   },
  138.   setup(props) {
  139.     console.log(props.listData);
  140.     const { proxy } = getCurrentInstance();
  141.     const selectValue = ref(null);
  142.     const currentPage = ref(1);
  143.     const pageSize = ref(10);
  144.     const small = ref(false);
  145.     const background = ref(false);
  146.     const disabled = ref(false);
  147.     const tableRowEditId = ref(0);
  148.     const tableColumnEditIndex = ref(0);
  149.     //图片平铺
  150.     const fit = ref("fill");
  151.     //对日期进行截取
  152.     function repString(val) {
  153.       return val.substr(0, 10);
  154.     }
  155.     const blurUnitInput = (row: any, column: any) => {
  156.       console.log(row, column);
  157.       tableRowEditId.value = null;
  158.       tableColumnEditIndex.value = null;
  159.       //在此处调接口传数据
  160.     };
  161.     const tableRowStyle = ({ row }) => {
  162.       let arr = [];
  163.       if (selectValue.value !== null) {
  164.         selectValue.value.filter((item, index) => {
  165.           arr.push(item.id);
  166.         });
  167.       }
  168.       for (var i = 0; i <= arr.length; i++) {
  169.         if (arr[i] == row.id) {
  170.           return { backgroundColor: "#ebf5ff !important" };
  171.         }
  172.       }
  173.     };
  174.     // 点击其他位置也选中当前行
  175.     const clickRow = (row) => {
  176.       console.log(row);
  177.       proxy.$refs.table.toggleRowSelection(row, undefined);
  178.     };
  179.     function handleSizeChange(val) {
  180.       console.log(val);
  181.     }
  182.     function handleCurrentChange(val) {
  183.       console.log(val);
  184.     }
  185.     // 多选框选中数据
  186.     function handleSelectionChange(selection) {
  187.       console.log(selection);
  188.       selectValue.value = selection;
  189.     }
  190.     const showUnitInput = (row: any, column: any) => {
  191.       // console.log('row', row)
  192.       // console.log('column', column)
  193.       //赋值给定义的变量
  194.       tableRowEditId.value = row.id; //确定点击的单元格在哪行 如果数据中有ID可以用ID判断，没有可以使用其他值判断，只要能确定是哪一行即可
  195.       tableColumnEditIndex.value = column.id; //确定点击的单元格在哪列
  196.     };
  197.     return {
  198.       repString,
  199.       tableRowStyle,
  200.       clickRow,
  201.       handleSelectionChange,
  202.       selectValue,
  203.       currentPage,
  204.       pageSize,
  205.       handleSizeChange,
  206.       handleCurrentChange,
  207.       small,
  208.       background,
  209.       disabled,
  210.       blurUnitInput,
  211.       tableRowEditId,
  212.       tableColumnEditIndex,
  213.       fit,
  214.       showUnitInput,
  215.     };
  216.   },
  217. };
  218. </script>
  219.  
  220. <style lang="scss">
  221. .ipt {
  222.   border: 0px;
  223. }
  224. </style>

组件使用tableDemo.vue:

  1. <template>
  2.   <div class="app-container">
  3.     <Ltable
  4.       :tableData="list"
  5.       :tableHeader="tableHeader"
  6.       :listLoading="listLoading"
  7.       :maxHeight="maxHeight"
  8.       :listData="listData"
  9.     ></Ltable>
  10.   </div>
  11. </template>
  12.  
  13. <script lang="ts" setup>
  14. import Ltable from "@/components/commonTable/index.vue";
  15. import { ref, reactive, nextTick, onMounted, toRefs } from "vue";
  16. import { useRouter } from "vue-router";
  17. import { ElMessage } from "element-plus";
  18.  
  19. const router = useRouter();
  20. const state = reactive({
  21.   // 模拟数据
  22.   list: [
  23.     {
  24.       id: "123456",
  25.       votethemeTitle: "dh",
  26.       userName: "yp",
  27.       votethemeStart: "2024-01-01",
  28.       votethemeEnd: "2024-01-02",
  29.       worksCount: "带钢",
  30.       image:
  31.         "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  32.       votethemeStatus: "1",
  33.     },
  34.     {
  35.       id: "1234567",
  36.       votethemeTitle: "dh",
  37.       userName: "yp",
  38.       votethemeStart: "2024-01-01",
  39.       votethemeEnd: "2024-01-02",
  40.       worksCount: "带钢",
  41.       image:
  42.         "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  43.       votethemeStatus: "3",
  44.     },
  45.     {
  46.       id: "12345678",
  47.       votethemeTitle: "dh",
  48.       userName: "yp",
  49.       votethemeStart: "2024-01-01",
  50.       votethemeEnd: "2024-01-02",
  51.       worksCount: "带钢",
  52.       image:
  53.         "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  54.       votethemeStatus: "2",
  55.     },
  56.   ],
  57.   page: {},
  58.   listLoading: false,
  59.   // 表头
  60.   tableHeader: [
  61.     {
  62.       prop: "id",
  63.       label: "编号",
  64.       minWidth: "50px",
  65.     },
  66.     {
  67.       prop: "votethemeTitle",
  68.       label: "主题名称",
  69.       minWidth: "150px",
  70.       type: "edit",
  71.     },
  72.     {
  73.       prop: "userName",
  74.       label: "发布人",
  75.       minWidth: "80px",
  76.     },
  77.     {
  78.       prop: ["votethemeStart", "votethemeEnd"],
  79.       label: "活动时间",
  80.       minWidth: "210px",
  81.       isDate: true,
  82.     },
  83.     {
  84.       prop: "worksCount",
  85.       label: "参与作品",
  86.       minWidth: "80px",
  87.     },
  88.     {
  89.       prop: "image",
  90.       label: "图片",
  91.       minWidth: "120px",
  92.       type: "img",
  93.     },
  94.     {
  95.       prop: "votethemeStatus",
  96.       label: "状态",
  97.       minWidth: "80px",
  98.       isline: true,
  99.       type: "dic",
  100.     },
  101.     {
  102.       prop: "btn",
  103.       label: "操作",
  104.       minWidth: "120px",
  105.       btn: [
  106.         {
  107.           name: "查看",
  108.           func: handleLook,
  109.         },
  110.         {
  111.           name: "编辑",
  112.           func: handleEdit,
  113.         },
  114.       ],
  115.     },
  116.   ],
  117.   maxHeight: "calc(100vh - 322px)",
  118. });
  119. // 模拟数据字典数据
  120. const votethemeStatus = ref([
  121.   { key: 1, value: "未开始", type: "" },
  122.   { key: 2, value: "进行中", type: "primary" },
  123.   { key: 3, value: "已结束", type: "danger" },
  124. ]);
  125. let listData = reactive({});
  126. listData["votethemeStatus"] = votethemeStatus;
  127. const { list, page, listLoading, tableHeader, maxHeight } = toRefs(state);
  128.  
  129. onMounted(() => {
  130.   // fetchData()
  131. });
  132. // 按钮事件
  133. function handleEdit(index, row) {
  134.   console.log(row);
  135. }
  136. function handleLook(index, row) {
  137.   router.push({
  138.     path: "detail?id=" + row.id,
  139.   });
  140. }
  141. </script>
  142. <style></style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/701619
推荐阅读