vue 表格组件 有事件交互二

04==》v-if下面可以嵌套 同级的 v-if 和v-node如下
若是第一个v-if没有下面的就不可能显示出来的。

<span v-if="!single" @click="handleStop(scope.row)">
<a v-if="scope.row.status == 0">停用</a>
<a v-else>启用</a>
</span>

 

<template>
  <el-table :data="tableData" stripe style="width: 100%"  class="base-table">
    <el-table-column
      v-for="item in tabColumn"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :align="item.align"
      empty-text="暂无数据"
    ></el-table-column>

    <!-- 操作下面的数据 -->
    <el-table-column
      align="center"
      width="60"
      label="操作">
      <template slot-scope="scope">
        <div class="tableColumn-control">
          <i v-if="!scope.row.showBtn" @mouseenter="handleMouseEnter(scope.row)" class="iconfont icon-more"></i>
          <div :class="{single:single}" v-else @mouseleave="handleMouseLeave(scope.row)">

            <span v-if="!single" @click="handleStop(scope.row)">
                <a v-if="scope.row.status == 0">停用</a>
                <a v-else>启用</a>
            </span>
            <span @click="handleEdit(scope)">编辑</span>
          </div>
        </div>
      </template>
    </el-table-column>


  </el-table>
</template>


<script>
export default {
  data() {
    return {};
  },props: {
    // 传递过来的值
    tableData: {
      type: Array,数组类型
      required: true 必须值
    },1)">  字段样式
    tabColumn: {
      type: Array,required: true
    },single:Boolean
  },methods:{
             /* 鼠标移入移除 */
        handleMouseEnter(row){
            row.showBtn = 
        },handleMouseLeave(row){
            row.showBtn = false  
        },1)">// 
        handleStop(row){
            this.$emit("on-stop",row)
        },1)"> 编辑
        handleEdit(row){
            this.$emit("on-edit"coped>

  .base-table {
    .tableColumn-control {
      height: 50px;
      line-height: 50px;
      i {
        color: #487ff6;
        cursor: pointer;
      }
      span {
        display: inline-block;
        cursor: pointer;
        &:last-child {
          color: #487ff6;
          margin-left: 10px;
        }
      }
      div {
        text-align: center;
        background: #D0E9FF;
        position: absolute;
        z-index: 999;
        left: -40px;
        top: 0;
        width: 100px;
        &.single {
          width: 60px;
          left: 0;
          span {
            margin-left: 0px;
          }
        }
      }
    }
 }
</style>

<style>
.base-table.el-table td { padding: 0; }
</style>

 

父组件

<template>
  <div>
    <mytab :tableData="tableData" :tabColumn="tabColumn" @on-stop="sonGiveChange" @on-edit="sonGiveStop"></mytab>
  </div>
</template>

<script>
import mytab from "../../../components/my-tab";
export  {
       表格数据
      tableData: [
        {
          date: "2016-05-02""2016-05-04"
        }
      ],1)"> 字段数组
      tabColumn: [
        {
          prop: "date"
        }
      ]
    };
  },components: {
    mytab
  },methods: {
    sonGiveChange(vale) {
      console.log("儿子传递给我的方法"方法"

 
 
                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。