Vhr项目分析（四） EmpBasic.vue分析

vhr项目地址： https://github.com/lenve/vhr
项目作者： https://blog.youkuaiyun.com/u012702547

主要栏目布局

• transition标签： name=“slide-fade”,过渡动画。

• v-show属性：判断元素是否显示或隐藏。

• el-table标签

属性	作用

大体结构

<div>
	<transition>
		<div>
			<el-row>
				<el-col></el-col>
				//...
				//...
			</el-row>
			<el-row>
				<el-col></el-col>
				//...
				//...
			</el-row>
			//...
			//...
		</div>
	</transition>

	<el-table>
		<el-table-column></el-table-column>
		<el-table-column></el-table-column>
		//...
		//...
	</el-table>
	
	<div>
		<el-button></el-button>
		<el-pagination></el-pagination>
	</div>
</div>

表格

          <el-table
            :data="mems"
            border
            stripe
            size="mini"

          >
            <el-table-column
              type="selection"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
            >
            </el-table-column>
            <el-table-column
              prop="id"
              label="编号"
            >
            </el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
            >
            </el-table-column>
            <el-table-column
              prop="room.name"
              label="地点">
            </el-table-column>
            <el-table-column
              label="日期"
            >
              <template slot-scope="scope">{{scope.row.date}}年</template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="primary" size="mini" style="padding: 3px 4px 3px 4px;margin: 2px"
                  @click="EditShow(scope.row)"
                >
                  编辑</el-button>
                <el-button type="danger" size="mini" style="padding: 3px 4px 3px 4px;margin: 2px">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

所用的数据

mems:[
	{name:'王阳明',id:'41631',gender:'男',room:{name:'余姚'},date:'1998'},
	{name:'王华',id:'7345252',gender:'男',room:{name:'余姚'},date:'2019'},
	{name:'司马懿',id:'24414',gender:'男',room:{name:'洛阳'},date:'2001'},
	{name:'司马光',id:'087967',gender:'男',room:{name:'金陵'},date:'2008'}
]

主要函数

• vue的$refs: ref加普通元素上，this.ref.name获取dom元素。this.ref.name获取组件实例，可以使用组件所有方法。
• mounted: initData(),loadEmps()
• initData(): 发送" /employee/basic/basicdata "，把得到的数据存入网页的缓存。
• loadEmps(): tableLoading设置true（表示表格正在加载），发送 " /employee/basic/emp?page=… "
  ，获取响应后，存入网页缓存。
• addEmp(formName):

		this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.emp.id) {
              //更新
              this.tableLoading = true;
              this.putRequest("/employee/basic/emp", this.emp).then(resp => {
                _this.tableLoading = false;
                if (resp && resp.status == 200) {
                  var data = resp.data;
                  _this.dialogVisible = false;
                  _this.emptyEmpData();
                  _this.loadEmps();
                }
              })
            } else {
              //添加
              this.tableLoading = true;
              this.postRequest("/employee/basic/emp", this.emp).then(resp => {
                _this.tableLoading = false;
                if (resp && resp.status == 200) {
                  var data = resp.data;

                  _this.dialogVisible = false;
                  _this.emptyEmpData();
                  _this.loadEmps();
                }
              })
            }
          } else {
            return false;
          }
        });