1

state:{
  tabs: [],
  activeIndex: '',
}
mutations:{
      // 添加tabs
  add_tabs(state,current_menu) {
          let cur_tabs=state.tabs;
          let haveTab=cur_tabs.some((val,index,cur_tabs)=>{
              return val===current_menu
          })
          if(!haveTab){
              state.tabs.push(current_menu);
              if(state.tabs.length==10){
                  state.tabs.splice(1,1)
              }
          }
  },
  // 删除tabs
  delete_tabs(state, route) {
    let index = 0;
    for (let tab of state.tabs) {
      if (tab.route === route) {
        break;
      }
      index++;
    }
    state.tabs.splice(index, 1);
  },
  clear_tabs(state){
      state.tabs=[]
  },
  // 设置当前激活的tab
  set_active_index(state, index) {
    state.activeIndex = index;
  }
  }
}

<el-tabs v-model="activeIndex" 
//activeIndex和:name对应的
//label是标签名
         @tab-remove="removeTab"
         @tab-click="tabClick">
              <el-tab-pane
                  v-for="(item) in tabs"
                  v-if="tabs.length"
                  :key="item.name"
                  :label="item.name"
                  :name="item.route">
              </el-tab-pane>
</el-tabs>

activeIndex:{
  get(){ return this.$store.state.tabs.activeIndex},
  set(val){
    this.$store.commit("tabs/set_active_index", val);
  }
}

在leftmenu页 ,初始的路由状态

 mounted() {
    // 刷新时以当前路由做为tab加入tabs
    // 当前路由不是首页时，添加首页以及另一页到store里，并设置激活状态
    // 当当前路由是首页时，添加首页到store，并设置激活状态
    if (this.$route.path !== "/") {
      this.$store.commit("tabs/add_tabs", { route: "/", name: "首页" });
      this.$store.commit("tabs/add_tabs", {
        route: this.$route.path,
        name: this.$route.name
      });
      this.$store.commit("tabs/set_active_index", this.$route.path);
    } else {
      this.$store.commit("tabs/add_tabs", { route: "/", name: "首页" });
      this.$store.commit("tabs/set_active_index", "/");
      this.$router.push("/");
    }
  }

当切换路由时(监听路由变化),判断栈里是否存在这个路由， 若存在，只改变激活状态；若不存在，则推入栈，并改变激活状态

{
    path: "sys/syncLog",
    name: "同步日志查询",
    component: 
},
 watch: {
  $route(to)
  {
      let flag = false;
      for (let option of this.tabs) {
          if (option.name === to.name) {
              flag = true;
              this.$store.commit("tabs/set_active_index", to.path);
              break;
          }
      }
      if (!flag) {
          this.$store.commit("tabs/add_tabs", {route: to.path, name: to.name});
          this.$store.commit("tabs/set_active_index", to.path);
      }
  }

tab标签点击时，this.$router.push切换相应的路由

tabClick(tab){
      this.$router.push({path: this.activeIndex});
},

移除tab标签

 tabRemove(targetName){ //tab-pan :name
      //首页不删
      if(targetName == '/'){
        return
      }
      this.$store.commit('delete_tabs', targetName);
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.tabs && this.tabs.length >= 1){
          this.$store.commit('set_active_index', this.tabs[this.tabs.length-1].route);
          this.$router.push({path: this.activeIndex});
        } else {
          this.$router.push({path: '/'});
        }
      }
    }

最开始

 data() {
      return {
        tableData: [],
        cols: [],
        url: '/api/table.json',
        total: 0
      }
    },
    created() {
      this.getTableData()
      console.log('created')
    },
    methods: {
      getTableData() {
        let url = this.url
        axios.get(url)
          .then(this.getHomeInfoSucc)
      },
      getHomeInfoSucc(res) {
        console.log(res)
        res = res.data
        this.tableData = []
        this.total = res.totalCount
        if (res.ret && res.data) {
          this.tableData = res.data
        }
        console.log(this.tableData)
      }

<template>
  <div class="table-container">
    <el-table :data="datalist" 
              @selection-change="handleSelectionChange" 
              @row-dblclick="rowDblickHandle"
              :default-sort="defaultSorts!=''?defaultSorts:{}" :border="true" stripe>
      <el-table-column v-if="defaultSelects" type="selection" width="55">
      </el-table-column>
      <template v-for="(column,index) in tableData.filds">
        <el-table-column v-if="column.render" 
                        :key="index" 
                        :prop="column.prop" 
                        :label="column.label"
                        :width="column.width" 
                        :type="column.type" >
          <template slot-scope="scope">
            <ld-render v-if="column.render" 
                      :row="scope.row" 
                      :render="column.render">
            </ld-render>
          </template>
        </el-table-column>


        <el-table-column v-else :sortable="defaultSorts.prop&&column.prop==defaultSorts.prop" :key="index"
                         :prop="column.prop" :label="column.label" :width="column.width" :type="column.type"
                         >
        </el-table-column>
      </template>
    </el-table>



    <div class="pagination clearfix" v-if="datalist.length>0">
      <div class="el-pull-right">
        <span class="total">共{{total}}条</span>
        <el-pagination
          background
          layout="sizes,prev, pager, next"
          :total="total" 
          :current-page="pageNo" 
          :page-size="pageSize" 
          :page-sizes="[10,20,30,40,50]"
          @current-change="handleCurrentChange"
          @prev-click="prevClick" 
          @next-click="nextClick" 
          @size-change="sizeClick">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

 data() {
      return {
        datalist: [],
        defaultSorts: this.defaultSort ? this.defaultSort : '',
        defaultSelects: this.defaultSelect ? this.defaultSelect : false,
        total: 5,
        pageNo: 1,
        pageSize: 10,
        summary: '',
        showSummary: true,
        defaultfixed: 'right'
      }
    },
    props: ['tableData', 'defaultSort', 'defaultSelect'],
    computed: {
      url() {
        return this.tableData.url
      },
      pram: {
        get () {
          return this.tableData.pram
        },
        set (newValue) {
          this.tableData.pram = newValue
          return this.tableData.pram
        }
      }
    },
    components: {
      ldRender
    },
    methods: {
      prevClick(val) {
        const _this = this
        if (_this.pageNo > 0) {
          _this.pageNo = _this.pageNo - 1
          _this.getTableData()
        }
      },
      nextClick() {
        const _this = this
        let list = _this.total / _this.tableData.pageSize
        if (_this.pageNo < list) {
          _this.getTableData()
        }
      },
      sizeClick(val) {
        this.pageSize = val
        this.pageNo = 1
        this.getTableData()
      },
      handleSelectionChange(val) {
        this.$emit('onHandleSelectionChange', val)
      },
      handleCurrentChange(val, pram) {
        const _this = this
        _this.pageNo = val
        _this.getTableData(pram)
      },
      getTableData(pram) {
        let url = this.url
        if (pram) {
          this.pram = pram
        }
        let pageSize= this.pageSize
        let data ={...this.pram,pageSize,pageNO}
        this.$post(url,data).then
      getHomeInfoSucc(res) {
        res = res.data
        let _this = this
        _this.datalist = []
        this.total = res.totalCount
        if (res.ret && res.data) {
          _this.datalist = res.data
        }
      }
    },
    created() {
      const _this = this
      if (_this.tableData.url && _this.tableData.url !== '') {
        this.getTableData()
      }
    },
    watch: {
      url(curVal, oldVal) {
        this.getTableData()
      }
    }
  }

<template>
  <div class="table" v-if="steps==0">
    <ld-table :tableData="todoPram" :defaultSelect="defaultSelect" 
              @onHandleSelectionChange="onHandleSelectionChange">
    </ld-table>
  </div>
  <hello-detail v-else-if="steps==1" :helloDetail="detail"></hello-detail>
</template>

 data() {
  return {
    steps: 0,
    detail: {},
    defaultSelect: 'true',
    multipleSelection: [],
    todoPram: {
      filds: [
        {prop: 'investName', label: '客户名称'},
        {prop: 'confirmDate', label: '确认日期'},
        {prop: 'diviRegDate', label: '分红登记日期'},
        {prop: 'pdName', label: '产品名称'},
        {prop: 'diviBaseShare', label: '分红基数份额', align: 'right'},
        {prop: 'unitDiviAmt', label: '每单位分红', align: 'right'},
        {prop: 'diviAmt', label: '红利总额', align: 'right'},
        {
          label: '操作',
          align: 'right',
          render: (h, param) => {
            let detailClick = {
              on: {
                click: () => {
                  this.queryDetail(param)
                }
              }
            }
            return (<el-tag type = 'success' {...detailClick}>查看详情 </el-tag>)
          }
        }
      ],
      pageSize: 10,
      url: '/api/city.json',
      pram: {}
    }
  }
},
components: {
  ldTable,
  helloDetail
},
methods: {
  onHandleSelectionChange(val) {
    this.multipleSelection = val
    this.multipleSelection.forEach(selection => {
      console.log(selection.investName)
    })
  },
  queryDetail(param) {
    this.detail = param.row
    this.steps = 1
  }
}
}

<script>
  export default {
    name: 'ld-render',
    functional: true,
    props: {
      row: Object,
      render: Function
    },
    render: (h, ctx) => {
      const params = {
        row: ctx.props.row,
        index: ctx.props.index
      }
      return ctx.props.render(h, params)
    }
  }
</script>

正是因为函数式组件精简了很多例如响应式和钩子函数的处理，因此渲染性能会有一定的提高，所以如果你的业务组件是一个纯展示且不需要有响应式数据状态的处理的，那函数式组件会是一个非常好的选择。
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.