收藏
便签
笔记
消息
创作
登录
应无所住,而生其心
博主信息
排名
1
文章
860
粉丝
112
评论
163
文章类别
最新文章
最新评价
net core webapi post传递参数
庸人 : 确实坑哈，我也是下班好了好几次，发现后台传递对象是可以的，但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器，因为现在百度富文本已经停止维护了，用tinymec...
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术
原

vue3 Element Plus 表格使用， vue-admin-beautiful表格使用。Element UI Plus弹窗更新，el-pagination分页，表格上面按钮搜索框,搜索框放在一行加入选择框等。Vue模板

11924人阅读 2021/10/6 15:39 总访问：5182651 评论：0 收藏：0 手机
分类: 前端

最最简单的表格

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column prop="date" label="Date" width="180" />
  4.     <el-table-column prop="name" label="Name" width="180" />
  5.     <el-table-column prop="address" label="Address" />
  6.   </el-table>
  7. </template>
  9. <script lang="ts" setup>
  10. const tableData = [
  11.   {
  12.     date: '2016-05-03',
  13.     name: 'Tom',
  14.     address: 'No. 189, Grove St, Los Angeles',
  15.   },
  16.   {
  17.     date: '2016-05-02',
  18.     name: 'Tom',
  19.     address: 'No. 189, Grove St, Los Angeles',
  20.   },
  21.   {
  22.     date: '2016-05-04',
  23.     name: 'Tom',
  24.     address: 'No. 189, Grove St, Los Angeles',
  25.   },
  26.   {
  27.     date: '2016-05-01',
  28.     name: 'Tom',
  29.     address: 'No. 189, Grove St, Los Angeles',
  30.   },
  31. ]
  32. </script>

带一点js的

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column label="Date" prop="date"  width="180" />
  4.     <el-table-column label="Name" prop="name"  width="180" />
  5.     <el-table-column label="Address" prop="address"  />
  6.   </el-table>
  7. </template>
  9. <script>
  11. export default defineComponent({
  12.     name: 'dynamicTable',
  13.     setup() {
  14.       const state = reactive({
  15.         tableData: [
  16.                     {
  17.                       date: '2016-05-03',
  18.                       name: 'Tom',
  19.                       address: 'No. 189, Grove St, Los Angeles',
  20.                     },
  21.                     {
  22.                       date: '2016-05-02',
  23.                       name: 'Tom',
  24.                       address: 'No. 189, Grove St, Los Angeles',
  25.                     },
  26.                     {
  27.                       date: '2016-05-04',
  28.                       name: 'Tom',
  29.                       address: 'No. 189, Grove St, Los Angeles',
  30.                     },
  31.                     {
  32.                       date: '2016-05-01',
  33.                       name: 'Tom',
  34.                       address: 'No. 189, Grove St, Los Angeles',
  35.                     },
  36.                   ]
  37.       })
  39.       onMounted(() => {
  40.       })
  42.       return {
  43.         ...toRefs(state)
  44.       }
  45.     },
  46.   })
  47. </script>

从后台读取的

  1. <template>
  2.   <el-table :data="tableData" style="width: 100%">
  3.     <el-table-column label="Id" prop="id"  width="180" />
  4.     <el-table-column label="宗地位置" prop="landName"  width="180" />
  5.     <el-table-column label="地块位置" prop="areaposition"  />
  6.   </el-table>
  7. </template>
  9. <script>
  11. import { getList } from '@/api/landInfo'
  13. export default defineComponent({
  14.     name: 'dynamicTable',
  15.     setup() {
  16.       const state = reactive({
  17.         tableData: []
  18.       })
  20.       const fetchData = async () => {
  21.         const result = await getList()
  22.         state.tableData = result.data
  23.       }
  24.       const queryData = () => {
  25.         fetchData()
  26.       }
  27.       onMounted(() => {
  28.         fetchData()
  29.       })
  31.       return {
  32.         ...toRefs(state),
  33.         queryData,
  34.       }
  35.     },
  36.   })
  37. </script>

表格增加一个固定的编辑列，与弹窗的方式编辑

增加一个编辑组件，这里只贴了4个输入框，要多少个自己加就行了。

  1. <template>
  2.   <el-dialog
  3.     v-model="dialogFormVisible"
  4.     :title="title"
  5.     width="700px"
  6.     @close="close"
  7.   >
  8.     <el-form
  9.       ref="formRef"
  10.       :inline="true"
  11.       label-width="80px"
  12.       :model="form"
  13.       :rules="rules"
  14.       class="demo-form-inline"
  15.     >
  16.       <el-form-item label="宗地位置" prop="landName">
  17.         <el-input v-model.trim="form.landName" />
  18.       </el-form-item>
  19.       <el-form-item label="地块位置" prop="areaposition">
  20.         <el-input v-model.trim="form.areaposition" />
  21.       </el-form-item>
  22.       <el-form-item label="控规编号" prop="kgnumber">
  23.         <el-input v-model.trim="form.kgnumber" />
  24.       </el-form-item>
  25.       <el-form-item label="土地面积" prop="landarea">
  26.         <el-input v-model.trim="form.landarea" />
  27.       </el-form-item>
  28.     </el-form>
  29.     <template #footer>
  30.       <el-button @click="close">取 消</el-button>
  31.       <el-button type="primary" @click="save">确 定</el-button>
  32.     </template>
  33.   </el-dialog>
  34. </template>
  36. <script>
  37. import { doEdit } from '@/api/table'
  39. export default defineComponent({
  40.   name: 'TableEdit',
  41.   emits: ['fetch-data'],
  42.   setup(props, { emit }) {
  43.     const $baseMessage = inject('$baseMessage')
  45.     const state = reactive({
  46.       formRef: null,
  47.       form: {
  48.         title: '',
  49.         author: '',
  50.       },
  51.       rules: {
  52.         title: [{ required: true, trigger: 'blur', message: '请输入宗地位置' }],
  53.         author: [
  54.           { required: true, trigger: 'blur', message: '请输入地块位置' },
  55.         ],
  56.       },
  57.       title: '',
  58.       dialogFormVisible: false,
  59.     })
  61.     const showEdit = (row) => {
  62.       if (!row) {
  63.         state.title = '添加'
  64.       } else {
  65.         state.title = '编辑'
  66.         state.form = JSON.parse(JSON.stringify(row))
  67.       }
  68.       state.dialogFormVisible = true
  69.     }
  70.     const close = () => {
  71.       state['formRef'].resetFields()
  72.       state.form = {
  73.         title: '',
  74.         author: '',
  75.       }
  76.       state.dialogFormVisible = false
  77.     }
  78.     const save = () => {
  79.       state['formRef'].validate(async (valid) => {
  80.         if (valid) {
  81.           const { msg } = await doEdit(state.form)
  82.           $baseMessage(msg, 'success', 'vab-hey-message-success')
  83.           emit('fetch-data')
  84.           close()
  85.         }
  86.       })
  87.     }
  89.     return {
  90.       ...toRefs(state),
  91.       showEdit,
  92.       close,
  93.       save,
  94.     }
  95.   },
  96. })
  97. </script>

表格页面：

  1. <template>
  2.   <el-table :data="tableData">
  3.     <el-table-column label="Id" prop="id" width="60" />
  4.     <el-table-column label="宗地位置" prop="landName" />
  5.     <el-table-column label="地块位置" prop="areaposition" />
  6.     <el-table-column label="控规编号" prop="kgnumber" />
  7.     <el-table-column label="供应方式" prop="provideType" />
  8.     <el-table-column label="土地面积" prop="landarea" />
  9.     <el-table-column
  10.       align="center"
  11.       fixed="right"
  12.       label="操作"
  13.       show-overflow-tooltip
  14.       width="200"
  15.     >
  16.       <template #default="{ row }">
  17.         <el-button text type="primary" @click="handleDetail(row)">
  18.           详情
  19.         </el-button>
  20.         <el-button text type="primary" @click="handleEdit(row)">编辑</el-button>
  21.         <el-button text type="primary" @click="handleDelete(row)">
  22.           删除
  23.         </el-button>
  24.       </template>
  25.     </el-table-column>
  26.   </el-table>
  27.   <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
  28. </template>
  30. <script>
  31. import { getList } from '@/api/landInfo'
  33. export default defineComponent({
  34.   name: 'dynamicTable',
  35.   components: {
  36.     LandInfoEdit: defineAsyncComponent(() =>
  37.       import('./components/LandInfoEdit')
  38.     ),
  39.   },
  40.   setup() {
  41.     const state = reactive({
  42.       editRef: null,
  43.       tableData: [],
  44.     })
  46.     const fetchData = async () => {
  47.       const result = await getList()
  48.       state.tableData = result.data
  49.     }
  50.     const queryData = () => {
  51.       fetchData()
  52.     }
  53.     const handleEdit = (row) => {
  54.       state['editRef'].showEdit(row)
  55.     }
  56.     onMounted(() => {
  57.       fetchData()
  58.     })
  60.     return {
  61.       ...toRefs(state),
  62.       queryData,
  63.       handleEdit,
  64.     }
  65.   },
  66. })
  67. </script>

增加分页
其实就是el-pagination控件的使用而已

  1. <template>
  2.   <div>
  3.     <el-table :data="tableData" stripe="true" size="small" border="true">
  4.       <el-table-column label="Id" prop="id" width="60" />
  5.       <el-table-column label="宗地位置" prop="landName" />
  6.       <el-table-column label="地块位置" prop="areaposition" />
  7.       <el-table-column label="控规编号" prop="kgnumber" />
  8.       <el-table-column label="供应方式" prop="provideType" />
  9.       <el-table-column label="土地面积" prop="landarea" />
  10.       <el-table-column label="平均容积率'" prop="floorarearatio" />
  11.       <el-table-column
  12.         align="center"
  13.         fixed="right"
  14.         label="操作"
  15.         show-overflow-tooltip
  16.         width="200"
  17.       >
  18.         <template #default="{ row }">
  19.           <el-button text type="primary" @click="handleDetail(row)">
  20.             详情
  21.           </el-button>
  22.           <el-button text type="primary" @click="handleEdit(row)">
  23.             编辑
  24.           </el-button>
  25.           <el-button text type="primary" @click="handleDelete(row)">
  26.             删除
  27.           </el-button>
  28.         </template>
  29.       </el-table-column>
  30.     </el-table>
  31.     <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
  32.     <el-pagination
  33.       background
  34.       :current-page="queryForm.pageNo"
  35.       :layout="layout"
  36.       :page-size="queryForm.pageSize"
  37.       :total="total"
  38.       @current-change="handleCurrentChange"
  39.       @size-change="handleSizeChange"
  40.     />
  41.   </div>
  42. </template>
  44. <script>
  45. import { getList } from '@/api/landInfo'
  47. export default defineComponent({
  48.   name: 'dynamicTable',
  49.   components: {
  50.     LandInfoEdit: defineAsyncComponent(() =>
  51.       import('./components/LandInfoEdit')
  52.     ),
  53.   },
  54.   setup() {
  55.     const state = reactive({
  56.       editRef: null,
  57.       tableData: [],
  58.       layout: 'total, sizes, prev, pager, next, jumper',
  59.       total: 0,
  60.       queryForm: {
  61.         pageNo: 1,
  62.         pageSize: 3,
  63.         title: '',
  64.       },
  65.     })
  67.     const fetchData = async () => {
  68.       // const result = await getList()
  69.       // state.tableData = result.data
  71.       const {
  72.         data: { list, total },
  73.       } = await getList(state.queryForm)
  75.       state.tableData = list
  76.       state.total = total
  77.     }
  78.     const handleSizeChange = (val) => {
  79.       state.queryForm.pageSize = val
  80.       fetchData()
  81.     }
  82.     const handleCurrentChange = (val) => {
  83.       state.queryForm.pageNo = val
  84.       fetchData()
  85.     }
  86.     const queryData = () => {
  87.       fetchData()
  88.     }
  89.     const handleEdit = (row) => {
  90.       state['editRef'].showEdit(row)
  91.     }
  92.     onMounted(() => {
  93.       fetchData()
  94.     })
  96.     return {
  97.       ...toRefs(state),
  98.       queryData,
  99.       handleEdit,
  100.       fetchData,
  101.       handleSizeChange,
  102.       handleCurrentChange,
  103.     }
  104.   },
  105. })
  106. </script>

接口返回数据的格式如下：

  1. {
  2.   "code": 200, //成功的状态码
  3.   "msg": "success", //提示信息
  4.   "data": { //返回数据
  5.       "list": [{}，{}，{}], //返回数组
  6.       "total": 238, //总条数（表格中用到，其它接口可以不返回）
  7.   }
  8. }

表格上面按钮搜索框等

也很简单代码如下：

  1. <vab-query-form>
  2.   <vab-query-form-left-panel>
  3.     <el-form inline label-width="0" :model="queryForm" @submit.prevent>
  4.       <el-form-item>
  5.         <el-input v-model="queryForm.name" placeholder="文件名称" />
  6.       </el-form-item>
  7.       <el-form-item>
  8.         <el-button
  9.           :icon="Search"
  10.           native-type="submit"
  11.           type="primary"
  12.           @click="queryData"
  13.         >
  14.           查询
  15.         </el-button>
  16.         <el-button :icon="Plus" type="success" @click="handleAdd">
  17.           上传
  18.         </el-button>
  19.         <el-button
  20.           :icon="Delete"
  21.           type="danger"
  22.           @click="handleDelete($event)"
  23.         >
  24.           删除
  25.         </el-button>
  26.       </el-form-item>
  27.     </el-form>
  28.   </vab-query-form-left-panel>
  29.   <vab-query-form-right-panel>
  30.     <el-button
  31.       style="margin: 0 10px 10px 0 !important"
  32.       text
  33.       type="primary"
  34.       @click="clickFullScreen"
  35.     >
  36.       <vab-icon
  37.         :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'"
  38.       />
  39.     </el-button>
  40.     <el-popover popper-class="custom-table-checkbox" trigger="hover">
  41.       <template #reference>
  42.         <el-button
  43.           style="margin: 0 0 10px 0 !important"
  44.           text
  45.           type="primary"
  46.         >
  47.           <vab-icon icon="settings-line" />
  48.         </el-button>
  49.       </template>
  50.       <el-checkbox-group v-model="checkList">
  51.         <vab-draggable
  52.           v-bind="dragOptions"
  53.           item-key="{ element }"
  54.           :list="columns"
  55.         >
  56.           <template #item="{ element }">
  57.             <div>
  58.               <vab-icon icon="drag-drop-line" />
  59.               <el-checkbox
  60.                 :disabled="element.disableCheck === true"
  61.                 :label="element.label"
  62.               >
  63.                 {{ element.label }}
  64.               </el-checkbox>
  65.             </div>
  66.           </template>
  67.         </vab-draggable>
  68.       </el-checkbox-group>
  69.     </el-popover>
  70.   </vab-query-form-right-panel>
  71. </vab-query-form>

注意按钮的图标需要引入一下

  1. import { Delete, Plus, Search, Setting } from '@element-plus/icons-vue'

图标需要暴露出去

  1.     return {
  2.       ...toRefs(state),
  3.       queryData,
  4.       handleEdit,
  5.       fetchData,
  6.       handleSizeChange,
  7.       handleCurrentChange,
  8.       //暴露图标
  9.       Plus,
  10.       Delete,
  11.       Search,
  12.       Setting,
  13.     }

搜索框放在一行，加入选择框

  1. <template>
  2.   <div ref="containerRef" class="custom-table-container">
  3.     <vab-upload ref="vabUploadRef" :limit="50" name="file" :size="2" :url="uploadUrl" @fetch-data="fetchData" />
  4.     <vab-query-form>
  5.       <vab-query-form-panel>
  6.         <el-form inline label-width="0" :model="queryForm" @submit.prevent>
  7.           <el-form-item>
  8.             <el-input v-model="queryForm.name" placeholder="文件名称" />
  9.           </el-form-item>
  10.           <el-form-item>
  11.             <el-select v-model="value" style="margin-left:6px" placeholder="所属部门">
  12.               <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
  13.             </el-select>
  14.             <el-select v-model="value" style="margin-left:6px" placeholder="文件类型">
  15.               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  16.             </el-select>
  17.           </el-form-item>
  18.           <el-form-item>
  19.             <el-button :icon="Search" native-type="submit" type="primary" @click="queryData">
  20.               查询
  21.             </el-button>
  22.             <el-button :icon="Plus" type="success" @click="handleShow()">
  23.               上传
  24.             </el-button>
  25.             <el-button type="danger" @click="downloadFile()">
  26.               <vab-icon icon="download-cloud-line" />
  27.               下载
  28.             </el-button>
  29.           </el-form-item>
  30.         </el-form>
  31.       </vab-query-form-panel>
  32.     </vab-query-form>
  34.     <el-table :data="tableData" ref="multipleTableRef" @current-change="handleTableCurrentChange" highlight-current-row
  35.       v-loading="listLoading" stripe="true" size="small" border="true">
  36.       .....
  37.     </el-table>
  38.     <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
  39.     <el-pagination background :current-page="queryForm.pageNo" :layout="layout" :page-size="queryForm.pageSize"
  40.       :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  41.   </div>
  42. </template>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue3 Element Plus 表单输入框放到一行
当垂直方向空间受限且表单较简单时，可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域...

vue elementui，vue3 Element Plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传
比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单，el-upload绑定一个data即可...

vue3 Element Plus 表格使用vue3常用界面搭配。Vue3基础模板使用
一个简单的表格加时间搜索界面效果如下： 代码如下： &lt;template&gt; &lt;div class=&quot;app-container&quot;&g...

vue3 Element Plus table+Sortable.js 行拖动，表格拖动
要先安装好Sortable.js依赖 cnpm install sortable.js 实现拖动的代码如下可以直接复制运行 &lt;template&gt; &lt;...

vue3 Element Plus 常用提示信息，提示框
引入相关方法import { ElMessageBox, ElMessage } from &#39;element-plus&#39; 常用提示框写法ElMessage.warning(&#39;不...

SQL Server的几种分页方式和效率
--topnotin方式 selecttop条数*fromtablename whereIdnotin(selecttop条数*页数Idfromtablename) --ROW_NUMBER()O...

SqlServer存储过程拼接sql语句，分页
在写有些存储过程的时候需要进行sql的拼接，然后在使用exec函数执行sql语句注意字符串的拼接，看下面一段存储过程的sql语句...

思宇上课笔记—SQL数据库分页查询的方式
jQuery课堂实例分页在实际开发中经常被用到，今天就来介绍下SQL数据库分页的几种常见方式。 下面的例子都以每分5条数据为一...

bootstrap分页条样式
其实就是一个pagination即可&lt;divclass=&quot;dataTables_paginatepagination&quot;&gt; &lt;ulid=&quot;pagination&quo...

Jquery分页条
jQuery分页条下载地址：https://www.jb51.net/jiaoben/589208.html1、在前台HTML页引入js以及css文件&lt;scriptsrc=&quot;~...

新型分页，排序，搜索，以及上一页与下一页
1.分页数据接口,方法与实现类publicinterfaceIPostRepository { Task&lt;PaginatedList&lt;Post&gt;&gt;GetAllPosts(Post...

sqlserver ROW_NUMBER 分页
很简单的一个sql语句根据行号分页即可 select * from (select *,ROW_NUMBER() over(order by id) as rownumber from[dbo]....

Layui分页
Layui开启分页只需要一句：page: true点击分页的时候会向你配置的url地址请求一次，会带上page与limit两个参数，也就是第几...

分页条使用
引入ＪＱＵＥＲＹ和ＣＳＳ&lt;scriptsrc=&quot;~/Jquery/jqPaginator.js&quot;&gt;&lt;/script&gt; &lt;linkhref=&quot;~/...