playlet/project/src/components/smartRadar/publicTable....

<template>
  <div>
  <!-- table -->
    <el-table v-loading="loading" ref="multipleTable"
              border
              :height='height'
              :data="tableData"
              tooltip-effect="dark"
              :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
              style="width: 100%">
      <template v-for="item in propsData.desCol">
        <el-table-column :key="item.prop" :label="item.label" align="center"
                         :show-overflow-tooltip="item.showOverTooltip"
                         :min-width="item.min_width?item.min_width:110">
          <template #header v-if="item.tooltip">
            {{item.label?item.label:'-'}}
            <el-tooltip class="disinblock" :content="item.tooltip" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div v-if="item.prop=='type'">
              <span v-if="scope.row.type==1">链接</span>
              <span v-else-if="scope.row.type==2">PDF</span>
              <span v-else-if="scope.row.type==3">图片</span>
              <span v-else-if="scope.row.type==4">视频</span>
              <span v-else="scope.row.type==1">-</span>
            </div>
            <div v-else-if="item.prop=='tag_list'">
              <template v-if="scope.row.tag_list&&scope.row.tag_list.length==0 || !scope.row.tag_list">-</template>
              <div class="customerServiceTagBox biaoqian" v-else>
                <div class="customerServiceTag" v-for="(item,index) in scope.row.tag_list" :key="index+'biaoqian'">{{item}}</div>
              </div>
            </div>
            <div v-else>{{scope.row[item.prop] ||scope.row[item.prop]==0 ? scope.row[item.prop] : '-'}}</div>
          </template>
        </el-table-column>
      </template>

      <template v-if="propsData.source=='radarIndex'">
        <el-table-column label="操作" align="center" min-width="180px">
          <template slot-scope="scope">
              <div class="flex">
                <div class="c-00B38A pointer">编辑</div>
                <el-popconfirm @confirm="deleRadar(scope.row.radar_id)" :title="`确定删除【${scope.row.name}】渠道活码？`">
                  <div slot="reference" class="c-00B38A pointer lMar8">删除</div>
                </el-popconfirm>
                <div class="c-00B38A pointer lMar8" @click="goDataAanlyse(scope.row.radar_id)">分析数据</div>
              </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination" v-show="total>0">
      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "publicTable",
  props:['propsData'],
  data(){
    return{
      loading: false,
      dataLoading: false,
      page: 1,
      pages: 0,
      total: 0,
      page_size: 20,
      height: '',
      tableData:[]
    }
  },
  watch:{
    'propsData.initFlag'(){
      this.source_init()
    }
  },
  created() {
    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
    this.source_init()
  },
  methods:{
    source_init(val){
      val=val?val:1
      if(this.propsData.source=='radarIndex'){
        this.init(val)
        this.height = document.documentElement.clientHeight - 220 > 400 ? document.documentElement.clientHeight - 220 : 400
      }else if(this.propsData.source=='channelAnalyse'){
        this.tableData = this.propsData.tableData
      }
    },
    goDataAanlyse(id){
      this.$router.push('/radar_dataAnalyse/'+id)
    },
    deleRadar(id){
      this.loading = true
      this.$axios.post(this.URL.BASEURL + this.URL.radar_radarDele, {
        radar_id:id
      }).then((res) => {
        var res = res.data
        this.loading = false
        this.$message({
          message: res.err,
          type: "warning"
        })
        if (res && res.errno == 0) {
          this.init(1)
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    init (page) {
      this.page = page ? page : this.page;
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.radar_radarList, {
        params:{
          group_id:this.propsData.group_id,
          name:this.propsData.radar_val,
          page: this.page,
          pagesize: this.page_size,
        }
      }).then((res) => {
        var res = res.data
        this.loading = false
        if (res && res.errno == 0) {
          this.tableData = res.rst.data
          this.total = res.rst.pageInfo.total;
          this.pages = res.rst.pageInfo.pages;
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    handleCurrentChange (val) {
      this.source_init(val)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>