alert弹框里弹一个表格_vxe-table:一款基于 vue的强大PC端表格组件

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

设计理念

• 面向现代浏览器，高效的简洁 API 设计
• 模块化表格、按需加载、扩展接口
• 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能

安装

使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
依赖库： xe-utils2.7+ vue2.6+

npm install xe-utils vxe-table

导入

      import Vue from 'vue'      import 'xe-utils'      import VXETable from 'vxe-table'      import 'vxe-table/lib/index.css'      Vue.use(VXETable)      // 给 vue 实例挂载全局窗口对象，属性名称随意定义，例如：$XModal      Vue.prototype.$modal = VXETable.modal

借助插件 babel-plugin-import 可以实现按需加载模块，减少文件体积。修改 .babelrc 或 babel.config.js 配置文件

基础功能

vxe-table除了提供强大的表格制作能力，还有提供一些基础功能使用，比如按钮、图标、表单、开关、工具栏、分页等；

基础表格

通过简单的代码就能创建一张表格；

      居左居中居右

自定义模板表格

使用 slot 自定义模板；可以实现自定义任意内容及 html 元素
default：自定义内容模板(提前格式化(最优) > formatter(值发生变化时) > slots(即时))
header：自定义表头模板
footer：自定义表尾模板
filter：自定义筛选模板(建议使用渲染器，可以更好的复用)
edit：自定义可编辑模板(建议使用渲染器，可以更好的复用)

  {{ $t('app.body.button.insert') }}下拉按钮删除保存

名称

序号

支持放弃弹框{{ row.name }} 我是超链接：{{ row.name }} 自定义头部 累计：{{ items[_columnIndex] }} {{ row.sex }} 编辑删除{{ formatDate(row.time) }} {{ row.name }} 自定义模板 无 自定义模板 {{ selectRecords.length }} 条 修改管理删除更多操作批量修改批量管理批量删除 {{ selectRow ? selectRow.text : '' }}

export default {          data () {            return {              value1: '',              value2: '',              showDetails: false,              selectRow: null,              isAllChecked: false,              isIndeterminate: false,              selectRecords: [],              tableData: [],              tablePage: {                total: 0,                currentPage: 1,                pageSize: 10              }            }          },          created () {            this.tableData = window.MOCK_DATA_LIST.slice(0, 10)          },          methods: {            formatDate (value) {              return XEUtils.toDateString(value, 'yyyy-MM-dd HH:mm:ss.S')            },            filterSexMethod ({ option, row }) {              return row.sex === option.data            },            changeFilterEvent (evnt, option, $panel) {              $panel.changeOption(evnt, !!option.data, option)            },            showDetailEvent (row) {              this.selectRow = row              this.showDetails = true            },            clickFooterItem (items, _columnIndex) {              this.$XModal.alert(`点击了表尾第${_columnIndex}列`)            },            checkboxChangeEvent ({ records }) {              this.isAllChecked = this.$refs.xTable.isAllCheckboxChecked()              this.isIndeterminate = this.$refs.xTable.isCheckboxIndeterminate()              this.selectRecords = records            },            changeAllEvent () {              this.$refs.xTable.setAllCheckboxRow(this.isAllChecked)              this.selectRecords = this.$refs.xTable.getCheckboxRecords()            },            footerMethod ({ columns, data }) {              return [                columns.map(column => {                  if (['sex', 'num'].includes(column.property)) {                    return XEUtils.sum(data, column.property)                  }                  return null                })              ]            }          }        }        

        .first-col {          position: relative;          height: 20px;        }        .first-col:before {          content: "";          position: absolute;          left: -15px;          top: 10px;          width: 170px;          height: 1px;          transform: rotate(20deg);          background-color: #e8eaec;        }        .first-col .first-col-top {          position: absolute;          right: 4px;          top: -10px;        }        .first-col .first-col-bottom {          position: absolute;          left: 4px;          bottom: -10px;        }        .my-filter {          margin: 10px;        }        .page-left {          position: absolute;          left: 10px;          top: 50%;          transform: translateY(-50%);          z-index: 10;        }

树形表格

名称

 export default {          data () {            return {              filterName: '',              loading: false,              originData: [],              tableData: []            }          },          created () {            this.loading = true            setTimeout(() => {              this.loading = false              this.originData = XEUtils.clone(window.MOCK_TREE_DATA_LIST, true)              this.handleSearch()            }, 300)          },          methods: {            handleSearch () {              let filterName = XEUtils.toString(this.filterName).trim()              if (filterName) {                let options = { children: 'children' }                let searchProps = ['name']                this.tableData = XEUtils.searchTree(this.originData, item => searchProps.some(key => XEUtils.toString(item[key]).indexOf(filterName) > -1), options)                // 搜索之后默认展开所有子节点                this.$nextTick(() => {                  this.$refs.xTree.setAllTreeExpand(true)                })              } else {                this.tableData = this.originData              }            },            // 创建一个防反跳策略函数，调用频率间隔 500 毫秒            searchEvent: XEUtils.debounce(function () {              this.handleSearch()            }, 500, { leading: false, trailing: true })          }        }

扩展插件

End

vxe-table的表格制作能力确实比较强，有很多功能这里并没有一一列出，感兴趣的朋友可以访问文档地址查看。

vxe-table文档地址：

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install

ps: 喜欢@IT老实人分享的内容，觉得对你的学习或者工作有所帮助就不要吝啬你的赞哦~，关注@IT老实人并私信小编你希望获得的学习资料，小编也会尽力帮助你的哦^^，当然也可以向小编交流学习问题哈！