Vue + elment ui 用法

最新推荐文章于 2024-06-06 16:36:35 发布

赤云烈马

最新推荐文章于 2024-06-06 16:36:35 发布

阅读量687

点赞数

分类专栏： elmentui 文章标签： vue

本文链接：https://blog.csdn.net/chiyunhouse/article/details/112360538

版权

elmentui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.vue Layout布局

通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有

1.start 居前（默认）
2.center 居中
3.end 居后
4.space-between 分布自适应（两边–中间，两边没有空隙）
5.around （中间–两边，两边会有空隙）

<el-row type="flex" justify="end">
</el-row>

2.弹窗

怎么通过一个按钮实现可以弹出一个弹窗
首先定义一个按钮
页面

<template>
<!--调度弹窗-->
    <el-dialog
      :title="$t('orderProcessing.dispatch')"
      :visible.sync="dispatchDialogFormVisible"
      width="70%"
      :append-to-body="true"
    >
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addDataList()">{{
          $t("提交")
        }}</el-button>
        <el-button @click="dispatchRest()">{{ $t("取消") }}</el-button>
      </div>
    </el-dialog>
  	<div style="margin-left: 4px">
		<el-button type="primary" @click="dispatch()">调度</el-button>
	</div>
</template>

方法和变量

<script>
export default {
data() {
	    return {
	    dispatchDialogFormVisible: false,
	    };
    },
   methods: {
		//调度跳转
	    dispatch() {
		      if (this.currentRow == null) {
		        this.$alert("请选择一行进行操作", "Tip", {
		          confirmButtonText: "确定"
		        });
		      } else {
		        this.dispatchDialogFormVisible = true;
		        this.$nextTick(() => {
		          this.dispatchTableData = this.currentRow;
		        });
	      	}
	  	  },
	  	  //调度弹窗关闭
	  	   dispatchRest() {
	      this.$refs.dispatchRuleform.clearValidate();
	      this.dispatchForm = {};
	      this.dispatchDialogFormVisible = false;
	    },
    }
  }
</script>

3.锚点和折叠面板

在想要跳转的地方定义锚点一般用id
vue页面：

<template>
<!-- 折叠面板 -->
    <el-collapse v-model="activeCollapseNames" @change="collapseOnChange" style="width:70%;margin:0 auto" >
		<div class="orderTitle"  :id="`top`">工单详情</div>
			<!-- 折叠面板1 -->
	      	<el-collapse-item name="1"  :id="`order`">
	      	</el-collapse-item>
	      	<!-- 折叠面板2 -->
	      	<el-collapse-item name="2"  :id="`cust`">
	     	 </el-collapse-item>
	      	<!-- 折叠面板3 -->
	      	<el-collapse-item name="3" :id="`file`">
	      	</el-collapse-item>
	      	<!-- 折叠面板4 -->
	      	<el-collapse-item name="4" :id="`completion`">
	      	</el-collapse-item>
	      	<!-- 折叠面板5 -->
	      	<el-collapse-item name="5" :id="`process`">
	      	</el-collapse-item>
	      </el-collapse>
	     <!-- 锚点列表 -->
	      <div class="vip_position" >
		      <el-row>
		        <el-button @click="scollTo('order')">工单信息</el-button>
		      </el-row>
		      <el-row>
		      <el-button @click="scollTo('cust')">客户信息</el-button>
		      </el-row>
		      <el-row>
		      <el-button @click="scollTo('file')">附件信息</el-button>
		      </el-row>
		      <el-row>
		      <el-button @click="scollTo('completion')">竣工信息</el-button>
		      </el-row>
		      <el-row>
		      <el-button @click="scollTo('process')">处理过程</el-button>
		      </el-row>
		      <el-row>
		        <el-button @click="scollTo('top')">返回顶部</el-button>
		      </el-row>
		    </div>
  </div>
</template>

方法：

<script>
export default {
  name: 'OrderDetail',
  data: function() {
    return {
      activeCollapseNames: ['1', '2', '3', '4', '5'],
        }
  },
  methods: {
      //跳转的方法
      scollTo(name) {
        document.querySelector(`#${name}`).scrollIntoView(true);
      },
      //折叠面板触发事件
      collapseOnChange(event) {},
     }
  }
</script>

css样式

<style lang="scss" >
  .vip_position{
    font: 20px "微软雅黑";
    color: black;
    /*右侧中间定位*/
    position: fixed;
    top: 45vh;
    right: 1px;
    /*垂直水平居中*/
    text-align: center;
   /* 鼠标移动到div变小手*/
    cursor:pointer;
  }
</style>