和element-ui类似的是iview-ui框架的使用方法基本相同，不同的是提供api和事件等等
iview-ui地址：https://iviewui.com/
如何使用
第一步安装
npm install view-design --save
要在main.js中进行配置
1 import Vue from 'vue'
2 // 相对路径引入的App.vue文件
3 import App from './App.vue'
4 // 引入ui框架
5 import elementUi from 'element-ui'
6 //引入css
7 import 'element-ui/lib/theme-chalk/index.css'
8 //使用element-ui
9 Vue.use(elementUi)
10 // 引入iview-ui框架
11 import iviewUi from "view-design"
12 //引入css
13 import 'view-design/dist/styles/iview.css'
14 //使用iview-ui
15 Vue.use(iviewUi)
16 new Vue({
17 // 渲染节点
18 render: h => h(App),
19 }).$mount('#app')
可以在任意页面中使用
1 <template>
2 <div>
3 <Input v-model="value" placeholder="Enter something..." style="width: 300px" />
4 </div>
5 </template>
6 <script>
7 export default {
8 }
9 </script>
10 <style lang="scss" scoped>
11 </style>
table表格
iview-ui的table和element的使用方法不一样，iview是完全通过数据驱动的
1 <template> 2 <Table :columns="columns1" :data="data1"></Table> 3 </template>
- columns指的是对应的表头状态
- data指的是加载的表格数据
1 <template>
2 <div>
3 <Table :columns="columns1" :data="data1"></Table>
4 </div>
5 </template>
6 <script>
7
8 export default {
9 data () {
10 return {
11 columns1: [
12 {
13 title: 'Name',
14 key: 'name'
15 },
16 {
17 title: 'Age',
18 key: 'age'
19 },
20 {
21 title: 'Address',
22 key: 'address'
23 }
24 ],
25 data1: [
26 {
27 name: 'John Brown',
28 age: 18,
29 address: 'New York No. 1 Lake Park',
30 date: '2016-10-03'
31 },
32 {
33 name: 'Jim Green',
34 age: 24,
35 address: 'London No. 1 Lake Park',
36 date: '2016-10-01'
37 },
38 {
39 name: 'Joe Black',
40 age: 30,
41 address: 'Sydney No. 1 Lake Park',
42 date: '2016-10-02'
43 },
44 {
45 name: 'Jon Snow',
46 age: 26,
47 address: 'Ottawa No. 2 Lake Park',
48 date: '2016-10-04'
49 }
50 ]
51 }
52 }
53 }
54
55 </script>
56 <style lang="scss" scoped>
57 </style>
我们需要注意的是iviewui和element-ui使用起来会有不一样感觉，iview表格会更轻，element-ui使用起来拓展性更好
表格的深入
1 <template>
2 <div>
3 <el-table :data="tableData" style="width: 100%">
4 <el-table-column prop="date" label="日期" width="180">
5 </el-table-column>
6 <el-table-column prop="name" label="姓名" width="180">
7 </el-table-column>
8 <el-table-column prop="address" label="地址">
9 </el-table-column>
10 <el-table-column prop="age" label="年龄">
11 </el-table-column>
12 <el-table-column prop="sex" label="性别">
13 </el-table-column>
14 <el-table-column prop="height" label="身高">
15 </el-table-column>
16 </el-table>
17 </div>
18 </template>
19
20 <script>
21 export default {
22 data() {
23 return {
24 tableData: [{
25 date: '2016-05-02',
26 name: '王小虎',
27 address: '上海市普陀区金沙江路 1518 弄',
28 age:18,
29 sex:1,
30 height:180,
31 },{
32 date: '2016-05-02',
33 name: '王小虎',
34 address: '上海市普陀区金沙江路 1518 弄',
35 age:18,
36 sex:0,
37 height:180,
38 }, {
39 date: '2016-05-02',
40 name: '王小虎',
41 address: '上海市普陀区金沙江路 1518 弄',
42 age:18,
43 sex:1,
44 height:180,
45 }, {
46 date: '2016-05-02',
47 name: '王小虎',
48 address: '上海市普陀区金沙江路 1518 弄',
49 age:18,
50 sex:0,
51 height:180,
52 },
53 ]
54 }
55 }
56 }
57 </script>
58
59 <style lang="scss" scoped>
60
61 </style>
此时我们想要进一步优化数据
table-colum提供了一个slot插槽功能，内部可以拓展自定义的内容
1 <template>
2 <div>
3 <el-table :data="tableData" style="width: 100%">
4 <el-table-column prop="date" label="日期" width="180">
5
6 </el-table-column>
7 <el-table-column prop="name" label="姓名" width="180">
8 </el-table-column>
9 <el-table-column prop="address" label="地址">
10 </el-table-column>
11 <el-table-column prop="age" label="年龄">
12 <template slot-scope="scope">
13 <div>
14 {{scope.row.age}}岁
15
16 </div>
17 </template>
18 </el-table-column>
19 <el-table-column prop="sex" label="性别">
20 <template slot-scope="scope">
21 <div>
22 {{getSex(scope.row.sex)}}
23
24 </div>
25 </template>
26 </el-table-column>
27 <el-table-column prop="height" label="身高">
28 <template slot-scope="scope">
29 <div>
30 {{scope.row.height}}cm
31
32 </div>
33 </template>
34 </el-table-column>
35 </el-table>
36 </div>
37 </template>
38
39 <script>
40 export default {
41 data() {
42 return {
43 tableData: [{
44 date: '2016-05-02',
45 name: '王小虎',
46 address: '上海市普陀区金沙江路 1518 弄',
47 age:18,
48 sex:1,
49 height:180,
50 },{
51 date: '2016-05-02',
52 name: '王小虎',
53 address: '上海市普陀区金沙江路 1518 弄',
54 age:18,
55 sex:0,
56 height:180,
57 }, {
58 date: '2016-05-02',
59 name: '王小虎',
60 address: '上海市普陀区金沙江路 1518 弄',
61 age:18,
62 sex:1,
63 height:180,
64 }, {
65 date: '2016-05-02',
66 name: '王小虎',
67 address: '上海市普陀区金沙江路 1518 弄',
68 age:18,
69 sex:0,
70 height:180,
71 },
72 ]
73 }
74 },
75 methods:{
76 getSex(val){
77 if(val==1){
78 return '男'
79 }else{
80 return '女'
81 }
82 }
83 }
84 }
85 </script>
86
87 <style lang="scss" scoped>
88
89 </style>
我们在看iviewui的table使用
1 <template>
2 <div>
3 <Table :columns="columns1" :data="tableData"></Table>
4 </div>
5 </template>
6
7 <script>
8 export default {
9 data () {
10 return {
11 columns1: [
12 {
13 title: '姓名',
14 key: 'name'
15 },
16 {
17 title: '年龄',
18 key: 'age'
19 },
20 {
21 title: '地址',
22 key: 'address'
23 },
24 {
25 title: '日期',
26 key: 'date'
27 }
28 ],
29 tableData: [
30 {
31 name: 'John Brown',
32 age: 18,
33 address: 'New York No. 1 Lake Park',
34 date: '2016-10-03'
35 },
36 {
37 name: 'Jim Green',
38 age: 24,
39 address: 'London No. 1 Lake Park',
40 date: '2016-10-01'
41 },
42 {
43 name: 'Joe Black',
44 age: 30,
45 address: 'Sydney No. 1 Lake Park',
46 date: '2016-10-02'
47 },
48 {
49 name: 'Jon Snow',
50 age: 26,
51 address: 'Ottawa No. 2 Lake Park',
52 date: '2016-10-04'
53 }
54 ]
55 }
56 }
57 }
58 </script>
59
60 <style lang="scss" scoped>
61
62 </style>
table表格必要的参数就是title和key，title表示的是表格的表头名称，key指的是接收的tableData数据参数
和elementui不同的是iviewui改变的是column数据状态，符合了iview研发的table 的宗旨，数据驱动表格
1 <template>
2 <div>
3 <Table :columns="columns1" :data="data1"></Table>
4 </div>
5 </template>
6
7 <script>
8 export default {
9 data () {
10 return {
11 columns1: [
12 {
13 title: '姓名',
14 key: 'name',
15
16
17 },
18 {
19 title: '年龄',
20 key: 'age',
21 render: (h, params) => {
22
23 return h('div', [
24 h('span',params.row.age+"岁")
25 ]);
26 }
27 },
28 {
29 title: '性别',
30 key: 'sex',
31 render: (h, params) => {
32 // let str=''
33 // if(params.row.sex==1){
34 // str="男"
35 // }else{
36 // str="女"
37 // }
38 // return h('div', [
39 // h('span',str)
40 // ]);
41 return h('div', [
42 h('span',this.getSex(params.row.sex))
43 ]);
44 }
45
46 },
47 {
48 title: '地址',
49 key: 'address'
50 },
51 {
52 title: '日期',
53 key: 'date'
54 }
55 ],
56 data1: [
57 {
58 name: 'John Brown',
59 age: 18,
60 sex:1,
61 address: 'New York No. 1 Lake Park',
62 date: '2016-10-03'
63 },
64 {
65 name: 'Jim Green',
66 age: 24,
67 sex:0,
68 address: 'London No. 1 Lake Park',
69 date: '2016-10-01'
70 },
71 {
72 name: 'Joe Black',
73 age: 30,
74 sex:1,
75 address: 'Sydney No. 1 Lake Park',
76 date: '2016-10-02'
77 },
78 {
79 name: 'Jon Snow',
80 age: 26,
81 sex:0,
82 address: 'Ottawa No. 2 Lake Park',
83 date: '2016-10-04'
84 }
85 ]
86 }
87 },
88 methods:{
89 getSex(val){
90 if(val==1){
91 return "男"
92 }else{
93 return '女'
94 }
95 }
96 }
97 }
98 </script>
99
100 <style lang="scss" scoped>
101
102 </style>
render函数是vue的自定义函数，可以理解为，在表格中创建组件或者元素
render函数返回的h内容就是一个函数，第一个参数是渲染的元素名称，第二个参数是渲染文本
iview表格深入-slot
我们使用iviewui也可以实现和elementui一样的效果
1 <template>
2 <div>
3 <Table :columns="columns1" :data="data1"></Table>
4 <template slot-scope="{ row }" slot="name">
5 <span>{{row.name}}</span>
6 </template>
7 <template slot-scope="{ row }" slot="age">
8 <span>{{row.age}}岁</span>
9 </template>
10 <template slot-scope="{ row }" slot="sex">
11 <span>{{row.sex}}</span>
12 </template>
13 <template slot-scope="{ row }" slot="address">
14 <span>{{row.address}}</span>
15 </template>
16 <template slot-scope="{ row }" slot="date">
17 <span>{{row.date}}</span>
18 </template>
19 </div>
20 </template>
21
22 <script>
23 export default {
24 data () {
25 return {
26 columns1: [
27 {
28 title: '姓名',
29 slot: 'name',
30 },
31 {
32 title: '年龄',
33 slot: 'age',
34 },
35 {
36 title: '性别',
37 slot: 'sex',
38 },
39 {
40 title: '地址',
41 slot: 'address'
42 },
43 {
44 title: '日期',
45 slot: 'date'
46 }
47 ],
48 data1: [
49 {
50 name: 'John Brown',
51 age: 18,
52 sex:1,
53 address: 'New York No. 1 Lake Park',
54 date: '2016-10-03'
55 },
56 {
57 name: 'Jim Green',
58 age: 24,
59 sex:0,
60 address: 'London No. 1 Lake Park',
61 date: '2016-10-01'
62 },
63 {
64 name: 'Joe Black',
65 age: 30,
66 sex:1,
67 address: 'Sydney No. 1 Lake Park',
68 date: '2016-10-02'
69 },
70 {
71 name: 'Jon Snow',
72 age: 26,
73 sex:0,
74 address: 'Ottawa No. 2 Lake Park',
75 date: '2016-10-04'
76 }
77 ]
78 }
79 },
80 methods:{
81 getSex(val){
82 if(val==1){
83 return "男"
84 }else{
85 return '女'
86 }
87 }
88 }
89 }
90 </script>
91
92 <style lang="scss" scoped>
93
94 </style>
需要注意的是column数据需要进行改变，从原来key改变为slot