Vue之el-select结合v-if动态控制template显示隐藏的方法是什么

这篇“Vue之el-select结合v-if动态控制template显示隐藏的方法是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue之el-select结合v-if动态控制template显示隐藏的方法是什么”文章吧。

el-select结合v-if动态控制template显示隐藏

背景： 根据（取值方式）select框中当选择项：

• 范围匹配的时候，（取值）显示两个输入框（上线，下线）；

• 精确匹配的时候，（取值）显示一个输入框（精确）

代码实现

<el-table-column label="取值方式" min-width="100" align="center">    <template scope="scope">        <el-select v-model="scope.row.extractMode" clearable placeholder="请选择">            <el-option v-for="item in extractModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>        </el-select>    </template>    </el-table-column>    <el-table-column label="取值" min-width="300" align="center">    <template scope="scope"> <!-- v-if="!showExactMactchInput0" -->        <div v-if="scope.row.extractMode== 'range' || scope.row.extractMode== 'fuzzy'"><!--  -->            <el-input size="small" class="limitTable" type="number" v-model="scope.row.lowerLimit" placeholder="请输入下限内容"></el-input>            -            <el-input size="small" class="limitTable" type="number" v-model="scope.row.upperLimit" placeholder="请输入上线内容"></el-input>        </div>        <div v-else-if="scope.row.extractMode== 'exacts' || scope.row.extractMode== 'exclude' " > <!-- v-bind:id="'exactlist-' + scope.$index" ref="'exactlist-' + scope.$index" -->            <el-input size="small" class="exactTable2" v-model="scope.row.exactMatch" placeholder="请输入精确内容"></el-input>        </div>    </template>    </el-table-column>    <el-table-column label="操作" align="center">    <template slot-scope="scope">        <el-button circle type="success" icon="el-icon-circle-plus" @click="handleLabelRowClone(scope.$index, scope.row)"></el-button>        <el-button type="danger" icon="el-icon-remove" circle @click="handleLabelRowDelete(scope.$index, scope.row)"></el-button>    </template></el-table-column>

贴图 

ps: 由于更入手vue，很多语法没仔细看文档，导致入坑不少；很多很简单的语法会耽搁时间；切记切记。

(坑：1：原本想用scope.$index[下标]作为标识从而v-if判断；经过实验变量无法进行赋值（弃之）

用v-bind:id【scope.$index】 进行dom控制style.display;考虑到vue本身仅关注视图层；方式不优好。（弃之）

恍惚间，每一行都独立不就是【scope.$index】【scope.row】是同样的；这样也不用监听v-select的change event。(用之)

v-if/else template任务状态{1,2,3};当完成==3时，跳转ftp：//

 <el-table-column label="任务状态" prop="taskStatus">    <template slot-scope="scope"><span v-if="scope.row.taskStatus=='3'" class="c-click" @click="hrefFtpUrl(scope.row)">            {{statusObj[scope.row.taskStatus] + scope.row.exportUrl}}</span>    <span v-else >{{statusObj[scope.row.taskStatus]}}</span>    </template></el-table-column>

Vue动态控制表格列的显示隐藏

效果

如上图所示，点击table右上方的表格按钮，弹出菜单栏，进行勾选，从而达到表格对应列显示和隐藏

代码

HTML部分

<template>  <div id="app">    <el-table :data="tableData" border  ref="table">      <el-table-column        fixed        prop="date"        label="日期"        width="150"        v-if="showColumn.date"      >      </el-table-column>      <el-table-column        prop="name"        label="姓名"        width="120"        v-if="showColumn.name"      >      </el-table-column>      <el-table-column        prop="province"        label="省份"        width="120"        v-if="showColumn.provinces"      >      </el-table-column>      <el-table-column        prop="city"        label="市区"        width="120"        v-if="showColumn.city"      >      </el-table-column>      <el-table-column        prop="address"        label="地址"        width="300"        v-if="showColumn.adreess"      >      </el-table-column>      <el-table-column        prop="zip"        label="邮编"        width="120"        v-if="showColumn.zipCode"      >      </el-table-column>      <el-table-column fixed="right" width="100" align="center">        <template slot="header">          <i            class="el-icon-setting"                        @click="showColumnOption"          ></i>        </template>        <template slot-scope="scope">          <el-button @click="handleClick(scope.row)" type="text" size="small"            >查看</el-button          >          <el-button type="text" size="small">编辑</el-button>        </template>      </el-table-column>    </el-table>    <!-- 配置列面板 -->    <transition name="fade">      <div class="columnOption" v-show="isShowColumn">        <div class="content">          <div class="head">选择显示字段</div>          <div class="body">            <el-checkbox v-model="checkList.date" disabled>日期</el-checkbox>            <el-checkbox v-model="checkList.name">姓名</el-checkbox>            <el-checkbox v-model="checkList.provinces">省份</el-checkbox>            <el-checkbox v-model="checkList.city">市区</el-checkbox>            <el-checkbox v-model="checkList.adreess">地址</el-checkbox>            <el-checkbox v-model="checkList.zipCode">邮编</el-checkbox>          </div>          <div class="footer">            <el-button size="small" type="primary" plain @click="saveColumn"              >保存列配置</el-button            >          </div>        </div>      </div>    </transition>  </div></template>

通过 v-if="showColumn.date" 来判断表格对应列的状态

javascript部分

<script>export default {  data() {    return {      isShowColumn: false,      tableData: [        {          date: "2016-05-02",          name: "王小虎",          province: "上海",          city: "普陀区",          address: "上海市普陀区金沙江路 1518 弄",          zip: 200333,        },        {          date: "2016-05-04",          name: "王小虎",          province: "上海",          city: "普陀区",          address: "上海市普陀区金沙江路 1517 弄",          zip: 200333,        },        {          date: "2016-05-01",          name: "王小虎",          province: "上海",          city: "普陀区",          address: "上海市普陀区金沙江路 1519 弄",          zip: 200333,        },        {          date: "2016-05-03",          name: "王小虎",          province: "上海",          city: "普陀区",          address: "上海市普陀区金沙江路 1516 弄",          zip: 200333,        },      ],      // 列的配置化对象，存储配置信息      checkList: {},      showColumn: {        date: true,        name: true,        provinces: true,        city: true,        adreess: true,        zipCode: true,      },    };  },  watch: {    // 监听复选框配置列所有的变化    checkList: {      handler: function (newnew, oldold) {        // console.log(newnew);         this.showColumn = newnew;        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况        this.$nextTick(() => {          this.$refs.table.doLayout();        });      },      deep: true,      immediate: true    },  },  mounted() {    // 发请求得到checkListInitData的列的名字    if(localStorage.getItem("columnSet")){      this.checkList = JSON.parse(localStorage.getItem("columnSet"))    }else{      this.checkList = {        date: true,        name: true,        provinces: true,        city: true,        adreess: true,        zipCode: true,      };    }  },  methods: {    handleClick(row) {      console.log(row);    },    showColumnOption() {      this.isShowColumn = true;    },    saveColumn() {      localStorage.setItem("columnSet",JSON.stringify(this.checkList))      this.isShowColumn = false;    },  },};</script>

css样式部分

.columnOption {  position: fixed;  z-index: 20;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.3);  display: flex;  flex-direction: row-reverse;  .content {    width: 100px;    height: 100%;    background-color: rgb(203, 223, 198);    .head {      width: 100%;      height: 44px;      border-bottom: 1px solid #000;      display: flex;      justify-content: center;      align-items: center;      font-size: 12px;    }    .body {      width: 100%;      height: calc(100% - 88px);      box-sizing: border-box;      padding-top: 10px;      overflow-y: auto;      .items {        width: 100%;        height: 100%;        overflow-y: auto;        display: flex;        flex-direction: column;        .el-checkbox {          width: 100%;          height: 28px;          line-height: 28px;          margin-bottom: 14px;          display: inline-block;          font-family: PingFang SC;          font-style: normal;          font-weight: normal;          font-size: 14px;          color: #000;          overflow: hidden;          text-overflow: ellipsis;          white-space: nowrap;          box-sizing: border-box;          padding-left: 14px;        }        .el-checkbox:hover {          background-color: #f5f7fa;        }      }    }    .footer {      width: 100%;      height: 44px;      border-top: 1px solid #000;      display: flex;      justify-content: center;      align-items: center;    }  }}// 控制淡入淡出效果.fade-enter-active,.fade-leave-active {  transition: opacity 0.3s;}.fade-enter,.fade-leave-to {  opacity: 0;}

以上就是关于“Vue之el-select结合v-if动态控制template显示隐藏的方法是什么”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。