avue 表格 自定义列（使用插槽）

 

快速上手

2021-7-29

About 1 min

---

# 介绍

通过本章节你可以了解到 Avue 的安装方法和基本使用姿势。

# 安装

# 通过 npm 安装

在现有项目中使用 Avue 时，可以通过 npm 或 yarn 进行安装：

# 安装
npm i @smallwei/avue -S
yarn add @smallwei/avue -S

# 引入
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);

# 使用字典需要引入axios

import axios from 'axios'
Vue.use(Avue,{axios})

//老版本需要使用如下
//main.js
window.axios = axios

Avue 是一个基于Element框架

(opens new window)低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率

# 为什么要做 Avue？

在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 生态，相关的库很多，很多功能相似，挑选成本高。

然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了……

而有时候其实只想做个普通的增删改查界面，用于信息管理

# 用 JSON 写页面有什么好处

为了实现用最简单方式来生成大部分页面，Avue 的解决方案是基于 JSON 来配置，它的独特好处是：

# 不需要懂前端

大部分 Avue 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；

# 不受前端技术更新的影响

当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 Avue，现在的维护成本会很高；

# 享受 Avue 的不断升级：

Avue 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改； 可以 完全 使用 可视化页面编辑器 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 Avue 可视化编辑器做出的页面是可以直接上线的。

# Avue 的其它亮点

# 提供完整的界面解决方案

其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 AVUE 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；

# 大量内置组件（50+），一站式解决：

其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 Avue 则内置大量组件，包括了表格、表单等业务组件，绝大部分中后台页面开发只需要了解 Avue 就足够了；

# #支持扩展

---

 

 

设置列的属性slot为true时，在卡槽中用prop作为卡槽的名字即可

<avue-crud :data="data" :option="option" >
  <template slot="name" slot-scope="scope" >
    <el-tag>{{scope}}</el-tag>
  </template>
</avue-crud>

<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              slot:true
            },
            {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    },
  }
</script>

https://www.avuejs.com/crud/crud-column.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%88%97