yos_web/src/SManagement/project_target/modules/components/projectAdd/table.vue

<template>
  <div>
    <el-table ref="tables"
    :fit="tool.calculatedColumnWidth($refs.tables,layout)"
              :row-class-name="tableClassName"
              v-loading="loading" highlight-current-row
              :data="data"
              :header-cell-style="{background:'#EEEEEE',color:'#333'}" size="mini"
              :height="height" @row-click="rowClick" style="width:100%"
               border
              @select="select"
      >
      <el-table-column
          type="selection"
          width="55" @handleSelectionChange="handleSelectionChange"  v-if="checkbox">
      </el-table-column>
      <el-table-column :show-overflow-tooltip="col.title == '来源' || col.title == '地址' || col.title == '备注'" v-for="(col,index) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :min-width="col.width || 150">
        <template slot-scope="scope">
          <!-- 自定义表格显示内容 -->
          <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
          <!-- 否则就是默认 -->
          <span v-else>{{scope.row[col.columnname]}}</span>
          <!-- 操作结构内容 -->
          <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
export default {
  /*
    layout:表结构数据;
    data:表渲染数据;
    custom:是否启用自定义结构;
    opwidth:操作列宽度
  */
  props:['layout','data','custom','height','checkbox','onRow'],
  data () {
    return {
      list:[],
      bill_id:""
    }
  },
  computed:{
    ...mapGetters({
      loading:'loading'
    })
  },
  methods:{
    rowClick (row) {
      this.$emit('rowClick',row)
    },
    tableClassName ({row,rowIndex}) {
      row.index = rowIndex
    },
    select(selection, row){
      console.log(row)
      this.bill_id = row.id;
      this.$emit("onRow",row)
      // 清除 所有勾选项
      this.$refs.tables.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if(selection.length === 0) return
      this.$refs.tables.toggleRowSelection(row, true);
    },
    handleSelectionChange(val) {
      if (val.length >= 2){
        this.$refs.tables.clearSelection();
      }
      this.$emit('checkboxCallBack',val)
    },
    isCheck(row,rowIndex) {

    }
  },
  mounted () {
    // this.listData()
  }
}

</script>
<style>

</style>