contract-business-web/src/components/XyTable/index.vue

<script>
export default {
  props:{
    height:{
      type:Number
    },
    list:{
      type:Array,
      default:()=> []
    },
    tableItem:{
      type:Array,
      default:()=> []
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    indent:{
      type:Number,
      default:18
    },
    cellStyle:{
      type:[Function,Object],
      default:()=>{}
    },
    rowStyle:{
      type:Function,
      default:()=>{}
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    headerRowStyle:{
      type:Function,
      default:()=>{}
    },
    headerCellStyle:{
      type:Function,
      default:()=>{}
    },
    defaultExpandAll:{
      type:Boolean,
      default:true
    },
    showIndex:{
      type:Boolean,
      default:true
    },
    showHeader:{
      type:Boolean,
      default:true
    },
    showSummary:{
      type:Boolean,
      default:false
    },
    summaryMethod:{
      type:Function
    },
    objectSpanMethod:{
      type:Function
    },
    treeProps:{
      type:Object,
      default:()=> {
        return { children: 'children', hasChildren: 'hasChildren' }
      }
    },
    tableStyle:{
      type:Object,
      default:()=>{
        return { width: '100%', marginBottom: "20px"}
      }
    },

    btnWidth:{
      type:Number,
      default:190
    }
  },
  data() {
    return {
      tableHeight: 0,
    }
  },
  methods: {
    initLoad() {
      var that = this;
      var clientHeight = document.documentElement.clientHeight
      var lxHeader_height = 96.5; //查询 头部
      var paginationHeight = 37; //分页的高度
      var topHeight = 50; //页面 头部
      let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
      that.tableHeight = tableHeight;
    },
    deleteClick(row){
      this.$emit('delete',row)
    },
    editorClick(row){
      this.$emit('editor',row)
    },
    selectClick(selection, row){
      this.$emit('select',selection, row)
    },
    selectAll (selection) {
      this.$emit('select-all',selection)
    },
    rowClick(selection, row){
      this.$emit('rowClick',selection, row)
    },
    cellClick(row, column, cell){
      this.$emit('cellClick',row, column, cell)
    },
    createIndexRow(){
      return <el-table-column type="index" align="center" fixed="left"></el-table-column>
    },
    toggleRowSelection(row){
      this.$nextTick(()=>{
        this.$refs.table.toggleRowSelection(row);
      })
    },
    clearSelection(){
      this.$refs.table.clearSelection();
    },
    toggleAllSelection(){
      this.$refs.table.toggleAllSelection()
    },
    setCurrentRow (row) {
      this.$refs.table.setCurrentRow(row)
    },
    doLayout () {
      this.$refs.table.doLayout()
    }
  },
  created() {
    this.initLoad()
  },
  mounted() {
  },
  render(h) {
    let {summaryMethod,cellClick,btnWidth,selectClick,height,createIndexRow,tableStyle,treeProps,showSummary,showHeader,$scopedSlots,showIndex,defaultExpandAll,headerCellStyle,headerRowStyle,rowStyle,cellStyle,indent,tableHeight,tableItem,list,deleteClick,editorClick,rowClick,objectSpanMethod} = this
    return (
      <div class="table-tree">
        { tableItem && tableItem.length>0 ?
          (<el-table
            ref="table"
            highlight-current-row={this.highlightCurrentRow}
            span-method={objectSpanMethod}
            show-summary={showSummary}
            show-header={showHeader}
            summary-method={summaryMethod}
            header-row-style={headerRowStyle}
            header-cell-style={headerCellStyle}
            row-style={rowStyle}
            cell-style={cellStyle}
            indent={indent}
            data={list}
            height={height ?? tableHeight}
            class="v-table"
            style={tableStyle}
            row-key={this.rowKey}
            border
            default-expand-all={defaultExpandAll}
            tree-props={treeProps}
            fit={true}
            on={{['select']:selectClick,['cell-click']:cellClick,['row-click']:rowClick,['select-all']:this.selectAll}}>
            {
              //序号
              showIndex ? createIndexRow() : ''
            }

            {
              tableItem.map((item,index)=>{
              //自定义表格内容
              if(item.customFn){
                return (
                  <el-table-column
                    fixed={item.fixed ?? false}
                    align={item.align ?? 'center'}
                    sortable={item.sortable ?? true}
                    width={item.width ?? 'auto'}
                    min-width={item.minWidth ?? item.width}
                    header-align={item.headerAlign ?? 'center'}
                    label={item.label}
                    prop={item.prop}
                    scopedSlots={{
                      default( scope ){
                        return item.customFn(scope.row,scope)
                      }
                    }}>
                  </el-table-column>
                )
              }
              else if(item.multiHd){
                //树结构表格内容
                return (
                  <el-table-column
                    header-align={item.headerAlign ?? 'center'}
                    label={item.label}>
                    {item.multiHd.map((item1,index1)=>{
                      if(item1.customFn){
                        return (
                          <el-table-column
                            prop={`${item.Fprop?item.Fprop+'.' : ''}${item1.prop}`}
                            align={item1.align ?? 'center'}
                            header-align={item1.headerAlign ?? 'center'}
                            label={item1.label}
                            width={item1.width ?? 'auto'}
                            min-width={item1.minWidth ?? item1.width}
                            sortable={item1.sortable ?? true}
                            scopedSlots={{
                              default( scope ){
                                return item1.customFn(scope.row,scope)
                              }
                            }}>
                          </el-table-column>
                        )
                      }else{
                        return (
                          <el-table-column
                            fixed={item1.fixed ?? false}
                            align={item1.align ?? 'center'}
                            header-align={item1.headerAlign ?? 'center'}
                            prop={`${item.Fprop?item.Fprop+'.' : ''}${item1.prop}`}
                            label={item1.label}
                            width={item1.width ?? 'auto'}
                            min-width={item1.minWidth ?? item1.width}
                            sortable={item1.sortable ?? true}
                            type={item1.type ?? ''}
                            formatter={item1.formatter}>
                          </el-table-column>
                        )
                      }
                    })}
                </el-table-column>
                )
              }
              else{
                //默认内容
                return (
                  <el-table-column
                    fixed={item.fixed ?? false}
                    formatter={item.formatter}
                    width={item.width ?? 'auto'}
                    min-width={item.minWidth ?? item.width}
                    header-align={item.headerAlign ?? 'center'}
                    align={item.align ?? 'center'}
                    label={item.label}
                    prop={item.prop}
                    label-class-name={item.labelClassName}
                    sortable={item.sortable ?? true}
                    type={item.type}
                    reserve-selection={item.reserveSelection}
                    selectable={item.selectable}
                    scopedSlots={{
                      header(scope){
                        return item.headerFn ? item.headerFn(scope) : (<span>{scope.column.label}</span>)
                      }
                    }}>
                  </el-table-column>
                )
              }
            })}

            {
              $scopedSlots.btns ? $scopedSlots.btns() :
                (<el-table-column
                  fixed="right"
                  label="操作"
                  width={btnWidth}
                  header-align="center"
                  scopedSlots={{
                    default( scope ){
                      return (
                        <div>
                          <Poptip
                            transfer={true}
                            confirm
                            title="确认要删除吗"
                            on={{['on-ok']:()=>deleteClick(scope.row)}}>
                            <i-button
                              type="error"
                              size="small"
                              style="margin-left: 10px;"
                              ghost>删除</i-button>
                          </Poptip>

                          <i-button
                            type="primary"
                            size="small"
                            style="margin-left: 10px;"
                            ghost
                            onClick={()=>editorClick(scope.row)}>编辑</i-button>
                        </div>
                      )
                    }
                  }}>
              </el-table-column>
                )
            }
          </el-table>)
          :
          <el-table height={height ?? tableHeight}/> }

        <el-backtop
          target=".el-table__body-wrapper"
          visibility-height={120}
          bottom={10}
          right={10}>
        </el-backtop>
      </div>
    )
  }
}
</script>

<style scoped lang="scss">

</style>