vue学习笔记 （vue在idea的结构，idea中执行npm命令和配置环境变量，element-ui安装和使用，avue的安装与使用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div id="ab">
    <img alt="Vue logo" src="../assets/logo.png">
    <h>哈哈哈哈哈哈</h>
  </div>
</template>

<script>
export default {
  name: "hi"
}
</script>
<style scoped>
</style>

1
2
3
4
5
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//vue中使用 element-ui 
Vue.use(ElementUI)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
  <div id="app">
    <el-button>默认按钮 </el-button>
    <el-button type="primary">主要 </el-button>
    <el-button type="text">文字 </el-button>
    <el-button type="success">成功</el-button>
    <el-button type="warning">警告</el-button>
    <el-button type="danger">危险</el-button>
    <el-button type="info">信息</el-button>
  </div>
</template>

<style>
#app{
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

1
2
3
4
5
<!--  为了展示文字按钮是透明的，外面加了一层颜色  -->
<div style="background:#ffffaa;">
    <div id="app"></div>
</div>

1
2
3
4
5
6
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
import axios from 'axios'
window.axios=axios
Vue.use(ElementUI).use(Avue);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<template>
  <div id="app">
    <el-row :span="24">
      <el-col :span="6">
        值:{{form}}<br>
        <avue-input-tree default-expand-all v-model="form" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree>
      </el-col>
      <el-col :span="24"></el-col>
      <el-col :span="6">
        包含父类值:{{form1}}<br>
        <avue-input-tree multiple v-model="form1" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree>
      </el-col>
      <el-col :span="24"></el-col>
      <el-col :span="6">
        不包含父类值:{{form2}}<br>
        <avue-input-tree leaf-only="" multiple v-model="form2" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree>
      </el-col>
      <el-col :span="24"></el-col>
      <el-col :span="6">
        半选是否包含父类值:{{form33}}<br>
        半选是不包含父类值:{{form3}}<br>
        <avue-input-tree ref="tree" include-half-checked="" multiple v-model="form3" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree>
      </el-col>
      <el-col :span="24"></el-col>
      <el-col :span="6">
        父子不关联:{{form4}}<br>
        <avue-input-tree :check-strictly="true" multiple v-model="form4" placeholder="请选择内容" type="tree" :dic="dic"></avue-input-tree>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form:'',
      form1:[0,1,2,3,4],
      form2:[1,2,3],
      form3:[2,1],
      form33:[],
      form4:[0],
      dic:[{
        label:'选项1',
        value:0,
        children:[{
          label:'选项3',
          value:2
        },{
          label:'选项4',
          value:3
        }]
      },{
        label:'选项2',
        value:1
      }]
    }
  },
  watch:{
    form3:{
      handler() {
        setTimeout(()=>{
          this.form33=this.$refs.tree.getHalfList();
        },0)
      },
      immediate: true,
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
  <div id="app">
    <avue-crud :data="filteredData" v-loadmore="handelLoadmore" :option="option" :data-size="tableData.length"></avue-crud>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      option:{
        height:300,
        expand:true,
        selection:true,
        selectionFixed:false,
        expandFixed:false,
        menuFixed:false,
        column:[{
          label:'姓名',
          prop:'name',
          width:200,
        },{
          label:'年龄',
          prop:'sex'
        }]
      },
      currentStartIndex: 0,
      currentEndIndex: 20
    };
  },
  directives:{
    loadmore:{
      componentUpdated: function (el, binding, vnode, oldVnode) {
        // 设置默认溢出显示数量
        var spillDataNum = 20;

        // 设置隐藏函数
        var timeout = false;
        let setRowDisableNone = function (topNum, showRowNum, binding) {
          if (timeout) {
            clearTimeout(timeout);
          }
          timeout = setTimeout(() => {
            binding.value.call(null, topNum, topNum + showRowNum + spillDataNum);
          });
        };
        setTimeout(() => {
          const dataSize = vnode.data.attrs['data-size'];
          const oldDataSize = oldVnode.data.attrs['data-size'];
          if (dataSize === oldDataSize) return;
          const selectWrap = el.querySelector('.el-table__body-wrapper');
          const selectTbody = selectWrap.querySelector('table tbody');
          const selectRow = selectWrap.querySelector('table tr');
          if (!selectRow) {
            return;
          }
          const rowHeight = selectRow.clientHeight;
          let showRowNum = Math.round(selectWrap.clientHeight / rowHeight);

          const createElementTR = document.createElement('tr');
          let createElementTRHeight = (dataSize - showRowNum - spillDataNum) * rowHeight;
          createElementTR.setAttribute('style', `height: ${createElementTRHeight}px;`);
          selectTbody.append(createElementTR);

          // 监听滚动后事件
          selectWrap.addEventListener('scroll', function () {
            let topPx = this.scrollTop - spillDataNum * rowHeight;
            let topNum = Math.round(topPx / rowHeight);
            let minTopNum = dataSize - spillDataNum - showRowNum;
            if (topNum > minTopNum) {
              topNum = minTopNum;
            }
            if (topNum < 0) {
              topNum = 0;
              topPx = 0;
            }
            selectTbody.setAttribute('style', `transform: translateY(${topPx}px)`);
            createElementTR.setAttribute('style', `height: ${createElementTRHeight - topPx > 0 ? createElementTRHeight - topPx : 0}px;`);
            setRowDisableNone(topNum, showRowNum, binding);
          })
        });
      }
    }
  },
  created() {
    this.getTableData();
  },
  computed: {
    filteredData() {
      let list = this.tableData.filter((item, index) => {
        if (index < this.currentStartIndex) {
          return false;
        } else if (index > this.currentEndIndex) {
          return false;
        } else {
          return true;
        }
      });
      return list
    }
  },
  methods: {
    handelLoadmore(currentStartIndex, currentEndIndex) {
      this.currentStartIndex = currentStartIndex;
      this.currentEndIndex = currentEndIndex;
    },
    getTableData() {
      let cont = 0;
      let tableData = [];
      while (cont < 10000) {
        cont = cont + 1;
        let object = {
          name: '王小虎' + cont,
          sex:cont
        }
        tableData.push(object);
      }
      setTimeout(() => {
        this.tableData = tableData;
      }, 0);
    }
  }
}
</script>