easy-comps/C_Table/tableOpts/tableSettings.js

基于element-ui、vue2的便于使用的封装组件

import InfoLink from "@/components/C_Table/insertions/InfoLink.vue";

function clickHandler(row, col, index) {
  console.log(row, 'row')
  const { id } = row;
  // this.ecg.alertId = id;
  // this.fetchData(this.optionsForECG)
  //   .then((_) => {
  //     //todo 添加暂无数据展示时的提示或会话等
  //     if (!this.ecg.source.length) return
  //     this.ecg.showECG = true;
  //     queueMicrotask((_) => {
  //       let drawEcg = this.$refs.ecg.drawEcg
  //       drawEcg()
  //     });
  //   })
  //   .catch(console.log);
}

//配置table的样式
const tableStyle= {
  height: "auto",
}

//绑定el-table组件的属性或者事件;data属性除外，单独通过tableData设置
function getTableSettings() {
  return {
    //Table Attributes
    attrs: {

    },
    //Table Events
    events: {
      'selection-change': function (e) {
        this.queryParams.warnings.ids = e.map(v => v.id)
      }.bind(this)
    }
  }
}

const getRender = (prop, zero = '正常', one = '异常') => function(h){return h('span',this.row[prop] === 0 ? zero : this.row[prop] === 1 ? one : '未知状态')}

//设定table的列
function getTableColSettings(tableName) {
  switch (tableName) {
    case 'devList':
      return [
        {
          prop: "model",
          label: "型号",
          // width: "120",
          align: "center",
        },
        {
          prop: "serialNo",
          label: "序列号",
          // width: "220",
          align: "center"
        },
        {
          prop: "deviceRunningState",
          label: "运行状态",
          align: "center",
          showComp: true,
          comp: {
            render: getRender('deviceRunningState'),
            props: ['row']
          }
        },
        {
          prop: "selfTestResult",
          label: "自检结果",
          align: "center",
          showComp: true,
          comp: {
            render: getRender('selfTestResult'),
            props: ['row']
          }
        },
        {
          prop: "deviceNetworkState",
          label: "网络状态",
          align: "center",
          showComp: true,
          comp: {
            render: getRender('deviceNetworkState'),
            props: ['row']
          }
        },
        {
          prop: "batterySelfTestResult",
          label: "电池自检结果",
          align: "center",
          showComp: true,
          comp: {
            render: getRender('batterySelfTestResult'),
            props: ['row']
          }
        },
        {
          prop: "electrodeSelfTestResult",
          label: "电极片自检结果",
          align: "center",
          showComp: true,
          comp: {
            render: getRender('electrodeSelfTestResult'),
            props: ['row']
          }
        },
        {
          prop: "hasRescueData",
          label: "救援数据",
          align: "center",
          showComp: true,
          comp: {
            render: getRender('hasRescueData', '没用', '有'),
            props: ['row']
          }
        },
        {
          prop: "description",
          label: "描述",
          align: "center",
          showComp: false
        },
        {
          label: "操作",
          align: "center",
          showComp: true,
          comp: InfoLink,
          // showHeader:'xxx', //在列的header插入自定义组件
          //header:自定义组件   //插入列的header的自定义组件
          //handlers内所有的事件均传递comp对应的组件
          handlers: {
            clickHandler: clickHandler.bind(this),
          },
          //headerHandlers:{methods}  //与handlers类似，只是传递给header的handler
          //headerOthers:any          //传递给header的其他属性
        }
      ];
    // case 'warnings':
    //   return [
    //     {
    //       type: "selection",
    //       width: "50",
    //       align: "center",
    //       // selectable:function(row){
    //       //   console.log(row,'row')
    //       //   return !row.status
    //       // },
    //       showComp: false,
    //     },
    //     {
    //       width: "50",
    //       align: "center",
    //       showComp: true,
    //       comp: Alerts,
    //       others: {
    //         single: true,
    //       },
    //     },
    //     {
    //       prop: "alertTypeString",
    //       label: "报警类型",
    //       width: "120",
    //       align: "center",
    //     },
    //     {
    //       prop: "alertTime",
    //       label: "报警时间",
    //       width: "220",
    //       align: "center",
    //       sortable:true
    //     },
    //     {
    //       prop: "detail",
    //       label: "报警详情",
    //       align: "center",
    //       showComp: false,
    //     },
    //     {
    //       prop: "status",
    //       label: "已查阅",
    //       align: "center",
    //       showComp: true,
    //       comp:{
    //         render(h){
    //           return h('span',this.row.status === 0 ? '未查看' : this.row.status === 1 ? '已查看' : '未知状态')
    //         },
    //         props:['row']
    //       }
    //     },
    //     {
    //       label: "操作",
    //       align: "center",
    //       showComp: true,
    //       comp: InfoLink,
    //       handlers: {
    //         clickHandler: clickHandler.bind(this),
    //       },
    //     }
    //   ]
    default:
      throw new TypeError('getTableColSettings使用的tableName的type值不合法')
  }
}

export {tableStyle,getTableSettings,getTableColSettings}