心悦琴
2021-08-21 23:30
采纳率: 94.1%
浏览 184
已结题

ant design vue表格表头各列想设置不一样的样式,用slot还是无法实现?

img
如图,想要在这个表格的表头的每一列设置不同的样式,

img

img
这么写一点效果都没有,请问该如何处理?


<template>

<div id="epidemicData">
  <div id="header">
    <h1 class="slogan">科学防护&nbsp;&nbsp;共渡难关</h1>
    <h2 class="title1">新型冠状病毒肺炎</h2>
    <h1 class="title2">疫情实时追踪</h1>
    <h3>数据来源:国家及各级卫健委每日信息发布</h3>


  </div>
  <div id="content">
    <a-menu v-model="current" mode="horizontal"
            :style="{
                      borderRadius: '1.667vw 1.667vw 0 0',
                      backgroundColor: '#ddecff',
                      fontSize:'2vw',
                      fontWeight: '400',
                      color:'#445063'

                      }">

      <a-menu-item key="epidemicData" @click="toDataPart"
                   :style="{width:'50%',height:'100%',padding:'0.8vw 0px',margin:'0px'

                                        }">
        国内疫情
      </a-menu-item>

      <a-menu-item key="knowledge" :style="{width:'50%',height:'100%',padding:'0.8vw 0px',margin:'0px',borderLeft:'1px solid #fff',borderRadius: '2.667vw 0 0 0'
                                        }" @click="toKnowledge">
        防疫须知
      </a-menu-item>

    </a-menu>
    <div v-if="dataPart===false">
      <div id="knowledge">
        <p class="knowledge-title">新冠肺炎预防须知</p>
        <div style="padding-bottom: 1px">
          <div class="knowledge-content">

            <div class="content-part">
              <div class="part-title">
                <img src="../../assets/part1Logo.png" alt="logo.png" class="titleLogo">
                <span class="titleItem">个人清洁</span>
              </div>

              <div class="part-list">
                <ul>
                  <li>
                    经常保持双手清洁,尤其在触摸口、鼻或眼之前。

                  </li>
                  <li>
                    经常用洗手液和清水清洗双手,搓手最少20秒,并用纸巾擦干。


                  </li>
                  <li>
                    打喷嚏或咳嗽时应用纸巾掩盖口鼻,把用过的纸巾弃置于有盖垃圾箱内,然后彻底清洁双手。

                  </li>
                </ul>
              </div>
            </div>

            <div class="content-part">
              <div class="part-title">
                <img src="../../assets/part2Logo.png" alt="logo.png" class="titleLogo">
                <span class="titleItem">尽量避免</span>
              </div>

              <div class="part-list">
                <ul>
                  <li>
                    减少前往人流密集的场所。如不可避免,应戴上外科口罩。

                  </li>
                  <li>
                    避免到访医院。如有必要到访医院,应佩戴外科口罩及时刻注重个人和手部卫生。
                  </li>
                  <li>
                    避免接触动物(包括野味)、禽鸟或其粪便;避免到海鲜、活禽市场或农场。
                  </li>

                  <li>
                    切勿进食野味及切勿光顾有提供野味的餐馆。

                  </li>

                  <li>
                    注意食物安全和卫生,避免进食或饮用生或末熟透的动物产品,包括奶类、蛋类和肉类。
                  </li>


                </ul>
              </div>
            </div>

            <div class="content-part">
              <div class="part-title">
                <img src="../../assets/part3Logo.png" alt="logo.png" class="titleLogo">
                <span class="titleItem">尽快就诊</span>
              </div>

              <div class="part-list">
                <ul>
                  <li>
                    如有身体不适,特别是有发烧或咳嗽,应戴上外科口罩并尽快就诊。
                  </li>

                </ul>
              </div>
            </div>


          </div>
        </div>

      </div>

    </div>


    <div v-else>
      <div id="card-block">
        <div class="statisticalTimes">统计截至&nbsp;{{ statisticalTimes }}</div>

        <div id="card">
          <div class="card-item">
            <div class="compare">较上日
              <span  style="color: #e57631;">+{{this.chinaAdd.localConfirmH5}}</span>
            </div>
            <div class="number" style="color: #e57631;">{{this.chinaTotal.localConfirm}}</div>
            <div class="card-title">本土现有确诊</div>
          </div>

          <div class="card-item">
            <div class="compare">较上日
              <span  style="color: #e61c1d;">{{this.chinaAdd.nowConfirm}}</span>
            </div>
            <div class="number" style="color: #e61c1d;">{{this.chinaTotal.nowConfirm}}</div>
            <div class="card-title">现有确诊</div>
          </div>

          <div class="card-item">
            <div class="compare">较上日
              <span  style="color: #be2121;">+{{this.chinaAdd.confirm}}</span>
            </div>
            <div class="number" style="color: #be2121;">{{this.chinaTotal.confirm}}</div>
            <div class="card-title">累计确诊</div>
          </div>

          <div class="card-item">
            <div class="compare">较上日
              <span  style="color: #ae3ac6;">+{{this.chinaAdd.noInfect}}</span>
            </div>
            <div class="number" style="color: #ae3ac6;">{{this.chinaTotal.noInfect}}</div>
            <div class="card-title">无症状感染者</div>
          </div>

          <div class="card-item">
            <div class="compare">较上日
              <span  style="color: #4e8be6;">+{{this.chinaAdd.importedCase}}</span>
            </div>
            <div class="number" style="color: #4e8be6;">{{this.chinaTotal.importedCase}}</div>
            <div class="card-title">境外输入</div>
          </div>

          <div class="card-item">
            <div class="compare">较上日
              <span  style="color: #4e5a65;">+{{this.chinaAdd.dead}}</span>
            </div>
            <div class="number" style="color: #4e5a65;">{{this.chinaTotal.dead}}</div>
            <div class="card-title">累计死亡</div>
          </div>
        </div>
      </div>


      <div id="dangerousPlaceForm">
        <div class="form-header">
          <div class="form-title">近期31省区市本土病例</div>

        </div>
        <a-table :columns="dangerousPlaceColumns"
                 :data-source="dangerousPlace"
                 :pagination="pagination"
                 :rowKey="record=>record.name"
                 :style="{padding:'10px 0px',margin:'0px',textAlign:'center'}"
        >
          <template slot="today.confirm" slot-scope="text,record">

            <span v-if="record.today.confirm!==0" style="color: #ff7f7f;">+{{ record.today.confirm}}</span>
            <span v-else>{{record.today.confirm}}</span>

          </template>


        </a-table>

      </div>


      <div id="provinceEpidemicDataForm">
        <div class="form-header">
          <div class="form-title" style="margin-bottom:2vw">中国疫情(包括港澳台)</div>

        </div>
        <a-table :columns="provinceEpidemicDataColumns"
                 childrenColumnName='child'
                 :data-source="provinceEpidemicData"
                 :pagination="pagination1"
                 :rowKey="record=>record.name"

                 >
          <!-- //record 为每一条数据, index 索引-->
          :style="{padding:'10px 0px',margin:'0px',textAlign:'center'}"
          >

                <span slot="total.nowConfirm" :style="{backgroundColor:'red'}"><a-icon type="smile-o" /></span>

        </a-table>

      </div>
    </div>









  </div>


</div>

</template>



<script>

import axios from 'axios'

const dangerousPlaceColumns = [

  {
    title: '城市(区)',
    key: 'name',
    dataIndex: 'name',

  },

  {
    title: '新增',
    key: 'today.confirm',
    dataIndex: 'today.confirm',
    scopedSlots: {customRender: 'today.confirm'},

  },

  {
    title: '现有确诊',
    key: 'total.nowConfirm',
    dataIndex: 'total.nowConfirm',
    // scopedSlots: {customRender: 'action'},
    // width: '40%',
  },



  {
    title: '区域风险',
    key: 'total.grade',
    dataIndex: 'total.grade',

  },

];


const provinceEpidemicDataColumns = [
  {
    title: '地区',
    key: 'name',
    dataIndex: 'name',

  },

  {
    title: '现有',
    key: 'total.nowConfirm',
    dataIndex: 'total.nowConfirm',
    slots:{title:'total.nowConfirm'},
    sorter: (a, b) => {
      return a.total.nowConfirm > b.total.nowConfirm? 1 : -1
    },

  },

  {
    title: '累计',
    key: 'total.confirm',
    dataIndex: 'total.confirm',
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.confirm > b.total.confirm? 1 : -1
    },

  },


  {
    title: '治愈',
    key: 'total.heal',
    dataIndex: 'total.heal',
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.heal > b.total.heal? 1 : -1
    },

  },

  {
    title: '死亡',
    key: 'total.dead',
    dataIndex: 'total.dead',
    // defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
    sorter: (a, b) => {
      return a.total.dead > b.total.dead? 1 : -1
    },

  },

];


export default {
  name: "index",
  data () {
    return{

      current: ['epidemicData'],

      dataPart:null,

      pagination: {
        pageSize:10,
        total: 0,
        current: 1,
        showTotal: total => `共${total}条`, // 显示总数
        onChange: page => {

          console.log('page', page);
          this.pagination.current = page
        }
      },

      pagination1: {
        pageSize:10,
        total: 0,
        current: 1,
        showTotal: total => `共${total}条`, // 显示总数
        onChange: page => {

          console.log('page', page);
          this.pagination1.current = page
        }
      },

      provinceEpidemicData: [],

      dangerousPlaceColumns,
      provinceEpidemicDataColumns,


      statisticalTimes:'',
      chinaTotal:{
        confirm:'',
        dead:'',
        heal:'',
        importedCase:'',
        localConfirm:'',
        localConfirmH5:'',
        local_acc_confirm:'',
        noInfect:'',
        noInfectH5:'',
        nowConfirm:'',
        nowSevere:'',
        showLocalConfirm:'',
        showlocalinfeciton:'',
        suspect:''
      },
      chinaAdd:{
        confirm:'',
        dead:'',
        heal:'',
        importedCase:'',
        localConfirm:'',
        localConfirmH5:'',
        noInfect:'',
        noInfectH5:'',
        nowConfirm:'',
        nowSevere:'',
        suspect:'',

      },
      dangerousPlace:[],

    }
  },

  mounted() {
    this.getStatistic()

  },
  methods: {
    toKnowledge(){

      console.log("跳转到防疫须知组件")
      this.dataPart=false
      console.log("this.dataPart:",this.dataPart)

    },

    toDataPart(){
      console.log("跳转到数据部分组件")
      this.dataPart=null
      console.log("this.dataPart:",this.dataPart)

    },



    getStatistic() {
      console.log("去获取疫情数据")
      axios('/proxy/g2/getOnsInfo?name=disease_h5').then(({data}) => {
        var dataset = eval('(' + data.data + ')');
        console.log("获取到的疫情数据:", dataset)
        this.statisticalTimes = dataset.lastUpdateTime
        console.log("截止日期:", this.statisticalTimes)

        // 获取当前系统时间算间隔
        console.log("国内疫情数据:", dataset.chinaTotal)
        this.chinaTotal = dataset.chinaTotal
        console.log("较上日变化的数据", dataset.chinaAdd)
        this.chinaAdd = dataset.chinaAdd

        const temp = [];
        // console.log("中国所有城市列表的长度:",dataset.areaTree[0].children.length)
        // console.log("某城市所有区域列表的长度",dataset.areaTree[0].children[4].children.length)

        for (let i = 0; i < dataset.areaTree[0].children.length; i++) {

          const index = dataset.areaTree[0].children[i]

          for (let j = 0; j < index.children.length; j++) {
            if (index.children[j].name !== "境外输入") {
              // console.log("index.children[j]:",index.children[j].name)
              if (index.children[j].total.grade !== undefined && index.children[j].total.nowConfirm !== 0) {

                // console.log("是否有风险等级:",index.children[j].total.grade)
                temp.push(index.children[j])
                // console.log("temp:",temp)
              }
            }

          }
        }

        this.dangerousPlace = temp.sort((a, b) => b.today.confirm - a.today.confirm)
        console.log("近期31省市区本土病例:", this.dangerousPlace)

        // 新增那一列用插槽,找出所有列表中今天有新增的,用插槽放

        // console.log("所有省份:",dataset.areaTree[0].children)
        // console.log("上海:",dataset.areaTree[0].children[5])
        // console.log("现有:",dataset.areaTree[0].children[5].total.nowConfirm)
        // console.log("累计:",dataset.areaTree[0].children[5].total.confirm)
        // console.log("治愈:",dataset.areaTree[0].children[5].total.heal)
        // console.log("死亡:",dataset.areaTree[0].children[5].total.dead)

        const temp1=[];

        for (let i = 0; i < dataset.areaTree[0].children.length; i++) {

          const index1 = dataset.areaTree[0].children[i]


          temp1.push(index1)


        }

        this.provinceEpidemicData=temp1

        console.log("国内疫情表:",this.provinceEpidemicData)

        })


    }

  }
}
</script>

<style scoped>


/deep/.ant-table-thead > tr > th{
  padding: 16px 10px;
  overflow-wrap: break-word;
  text-align: center;
  background-color: #ddecff;
  font-size: 15px;
  font-weight:600;
}
/deep/.ant-table-tbody > tr > td{
  padding: 16px 0px;
  overflow-wrap: break-word;
  text-align: center;
}

/deep/.ant-table-tbody > tr > td.ant-table-column-sort {
  background: inherit;
}


h3{
  color:#fff;
  margin:10px auto;
}
h1.slogan{
  color:#fff;
  font-size:30px;
  position: relative;
  top:15px;
  font-weight: bold;

}

h2.title1{
  color:rgb(255,234,166);
  font-size:28px;
  margin-bottom: 0px;
}

h1.title2{
  font-size:30px;
  color: #fff;
  margin:0px;
  padding: 0px;
}

div#header{
  /*max-width:1000px;*/
  /*margin:0 auto;*/
  background: url(../../assets/headerBackground.png);
  background-size: cover;
  position: relative;
  min-height: 210px;
}


div#content{

  /*max-width:1000px;*/
  /*margin:0 auto;*/
  position: relative;
  margin-top:-20px;

  background: #fff;
  border-radius:2.667vw 2.667vw 0 0;
  box-shadow:#BBBBBB 0px 0px 10px;

}



div.statisticalTimes{
font-size: 1.4vw;
padding-top: 10px;
text-align: left;
}



div#card-block,div#dangerousPlaceForm,div#provinceEpidemicDataForm,div#knowledge{
  margin: 1.667vw 5.333vw 2vw;
}

p.knowledge-title{
  color: #222;
  font-size: 3.8vw;
  font-weight: 600;
  margin-top:1em
}

img.titleLogo{
  width: 4.267vw;
  height: 4.267vw;
}

div.part-title{
  display: flex;
}

span.titleItem{
  font-size: 3vw;
  font-weight: bold;

  margin-left: 1.667vw;
}

li{
  margin-bottom: 1vw;
}


div.part-list{
  margin: 2vw 1vw;
  font-size: 1.8vw;
}


div.knowledge-content{
  margin: 3.333vw 5.333vw 2vw;
  border-radius: 1.6vw;
  background: #f8f8f8;
  padding: 3.333vw 3vw 3vw 3vw;
  text-align: left;
}


div.form-title{
text-align: left;
font-size: 2.1vw;
font-weight: 700;
color: #222;
}

div#card{

display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

-ms-flex-pack: center;
justify-content: center;

-ms-flex-align: center;
align-items: center;
padding-bottom: 1.333vw;

}

div.card-item{
padding:5px 10px;
margin-top:10px;

/*width: 21.0vw;*/
  /*width:200px;*/
  margin-right:10px;
  position: relative;
  text-align: center;
  background-color: #fffaf7;
  padding-bottom: 10px;
}

div.compare{
  padding-top: 1.6vw;
  color: #7c7c7c;
  font-size: 1.967vw;
  line-height: 2.667vw;
  /*height: 2.667vw;*/
  font-weight: 500;
}

div.number{
  font-size: 3.867vw;
  line-height: 5.867vw;
  margin: 5px;
  font-weight: 600;
  /*padding-top: 1.6vw;*/
}

div.card-title{
  font-size: 2.0vw;
  line-height: 3.2vw;
  color: #222;
  font-weight: 500;
}
</style>


此为vue文件


const vueConfig = {
    lintOnSave: false,
    devServer: {
        // development server port 8000
        port: 8000,

        proxy: {
            "/proxy/": {///proxy/为开头的适合这个规则
                target:"https://view.inews.qq.com",
                // target: "https://interface.sina.cn",//目标地址
                "secure": true,//false为http访问,true为https访问
                "changeOrigin": true,//跨域访问设置,true代表跨域
                "pathRewrite": {//路径改写规则
                    "^/proxy": ""///proxy/为开头的改写为''
                    //下面这种也行
                    //  "^/api":"/list"///api/为开头的改写为'/list'
                },
                // "headers": {//设置请求头伪装成手机端的访问
                //     "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
                // }
            }
        }
    }
}
module.exports = vueConfig


此为vue.config.js文件

  • 收藏

1条回答 默认 最新

  • 就是不掉头发 2021-08-22 00:27
    已采纳

    看看表头的class是啥,直接重写class样式覆盖

    打赏 评论

相关推荐 更多相似问题