elementui封装table组件以及子父组件通信

最新推荐文章于 2023-04-03 17:00:42 发布

杨家八公子

最新推荐文章于 2023-04-03 17:00:42 发布

阅读量454

点赞数

分类专栏： Element js Vue 文章标签： vue element table

本文链接：https://blog.csdn.net/jerryyang_2017/article/details/114630320

版权

js 同时被 3 个专栏收录

47 篇文章 3 订阅

订阅专栏

Vue

34 篇文章 0 订阅

订阅专栏

Element

13 篇文章 0 订阅

订阅专栏

<template>
  <el-table
    :data="tableData"
    border
    v-loading = "loading"
       element-loading-background = "rgba(0, 0, 0, 0.5)"
       element-loading-text = "数据正在加载中"
       element-loading-spinner = "el-icon-loading"
    style="width: 100%">
    <el-table-column  v-for="(item,index) in fieldList" :key="index"
      :label="item.name"
      :fixed="item.fixedBool"
      :width="item.widthValue"
      show-overflow-tooltip="true"
       >
       <template #default="scope">
        <i class="el-icon-time"></i>
        <span  class="isActive"
         v-if="item.isJumpField == true"
          @click="$router.push(scope.row.isJump)"
         >
          {{scope.row[item.field]}}
        </span>
        <span style="margin-left: 10px" v-else> {{scope.row[item.field]}}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "IndexmoduleconfiTable",
  props: {
    tableData: { type: Object, default: () => [] },
    fieldList:{type:Object},
    loading:{type:Boolean}
  },
  data() {
      return {
        
      }
  },
  mounted() {
    console.log(this.fieldList,4444444444)
  },
  methods: {
   
  }
};
</script>

<style>
.isActive:hover{
  cursor: pointer;
  text-decoration: underline;
  color:blue;
}
</style>

调用页面

<template>
  <div class="app-container home">
    IT服务管理平台
  </div>
  <!--region table 表格-->
  <div class="app-container">
     <div class="el-tbleborder">
        <div class="el-tablePd">
            <IndexTable :paneltitle="paneltitle" :iconLists="iconLists"  @handleIconEvent='handleIconEvent'></IndexTable>
            <div class="el-table-zj">
              <Table :tableData="tableData" :loading="loading" :fieldList="fieldList"></Table>
            </div>
        </div>
        <div class="el-tablePd">
            <IndexTable :paneltitle="paneltitle1" :iconLists="iconLists"  @handleIconEvent='handleIconEvent'></IndexTable>
            <div class="el-table-zj">
              <Table :tableData="tableData" :loading="loading" :fieldList="fieldList1"></Table>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Table  from"@/components/IndexmoduleconfiTable/index";
import IndexTable  from"@/components/IndexTable/index";
import SvgIcon from '@/components/SvgIcon';
export default {
  name: "index",
  components: {Table,SvgIcon,IndexTable},
  data() {
    return {
      // 版本号
      version: "3.3.0",
      loading:false,
      paneltitle:'我的待办',
      paneltitle1:'我是标题2号',

      tableData: [{
          date: '2021-02-19 17:06:33',
          name: '测试状态 -- L4-低-ddd444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444',
          isJump:{path: '/profile', query: { name: 'Profile'}}  //要跳转的路由
        }, {
          date: '2021-01-22 18:33:12',
          name: '测试状态 -- 测试1223',
         
        }, {
          date: '2021-02-19 17:00:21',
          name: '测试状态 -- 测试1223',
         
        }, {
          date: '2021-01-25 16:47:02',
          name: '测试状态 -- 测试1223',
         
        }],
      fieldList:[
         {
          field:'name',
          name:'名称',
          fixedBool:false,
          isJumpField:true, //要跳转的字段的标示
          widthValue:"",
        },
        {
          field:'date',
          name:'日期',
          fixedBool:false,
          isJumpField:false, //要跳转的字段的标示
          widthValue:"",
        },
      ],
      fieldList1:[
         {
          field:'name',
          name:'名称',
          fixedBool:false,
          isJumpField:false, //要跳转的字段的标示
          widthValue:"",
        },
        {
          field:'date',
          name:'日期',
          fixedBool:false,
          isJumpField:true, //要跳转的字段的标示
          widthValue:"",
        },
      ],
      iconLists:[ //按钮的数组
        'more',
        'brush',
        'guan'
      ]
    };
    
  },
  methods: {
      //处理子组件传递过来的数据 可以根据name的值判断是点击了哪个按钮
      handleIconEvent(name){
        console.log(name)
        console.log('我是父组件的')
      }

  },
  
};
</script>

<style scoped lang="scss">
.home {
  font-weight: bolder;
}
  .table-expand {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-tbleborder{
      width: 100%;
      border: 1px solid #e7e7e7;
  }
  .el-tablePd{
      padding:  10px;
  }
  .el-table-zj{
      padding-top: 10px;
  }
  .bg-purple-light{
    text-align: right;
  }
.panel-title {
    padding-left: 20px;
    margin-left: -10px;
    font-weight: bold;
   
}
.panel-title:before {
    display: block;
    content: "";
    height: 17px;
    width: 5px;
    position: absolute;
    border-right: 3px solid #3498db;
    top: 3px;
}
.hover:hover{
  color: #014dd4;
  cursor: pointer;
}
.panel-controls .controls{
  padding: 0 10px;
}
</style>