修改套餐自定义组件样式

src/views/component/taocans.vue

@@ -1,17 +1,21 @@
 <template>
-    <div> 
-   <el-button type="success" @click="firstLoadQuyu()">查询</el-button> 
+    <div   class="jjww">
+      <div style="display: flex;justify-content: space-around;">
+              <span class="spans">各套餐明细</span>
+   <el-button type="primary"@click="firstLoadQuyu()" style=" margin-left: 86%;height: 28px;width: 71px;">查询</el-button>
+      </div>
   <el-table
       :data="datase"
-      style="width: 100%,height:100%"
+      style="width: 100%;height: 100%;"
       size="max"
-      
       :span-method="objectSpanMethod"
+
     >     <el-table-column
           prop="tao_can_ming_chen"
           label="套餐名称"
           key="tao_can_ming_chen"
           align="center"
+          highlight-current-row:'true'
           :width=" 120 "
         >
       </el-table-column>
@@ -43,7 +47,7 @@
           align="center"
           :width=" 120 "
         > </el-table-column>
-    </el-table> 
+    </el-table>
   </div>
 </template>
 
@@ -52,7 +56,7 @@
   export default {
     data() {
       return {
-        tableData: [{ 
+        tableData: [{
           id: '12987122',
           name: '王小虎',
           amount1: '234',
@@ -104,7 +108,7 @@
     default: false,
   }
 },
-mounted(){   
+mounted(){
   let this_= this;
   setTimeout(()=>{
       this_.load();
@@ -114,10 +118,13 @@ mounted(){
       // this.tableheader = Object.keys(Object.assign({},...this.datase))
 
 },
-    methods: {  
+    methods: {
+       headClass () {
+              return 'text-align: center;background:#eef1f6;'
+            },
       firstLoadQuyu(){
           this.load();
-      },      
+      },
       load(){
           let this_ = this;
           let sqlString =`select  tc.tao_can_ming_chen,zb.xiang_mu_ming_che,jian_ce_fang_fa_,xiang_mu_dan_jia_,zhe_hou_jia_ge_  from  t_jctc   tc join t_tczb  zb on  tc.id_=zb.parent_id_  where  he_tong_bian_hao_='${this_.formData.heTongBianHao}'`
@@ -160,4 +167,30 @@ mounted(){
   },
   }
 }
-</script>
+</script>
+<style scoped lang="less">
+
+  /deep/.el-table .el-table__cell{
+  padding: 0px;
+  height: 32px;
+}
+
+.jjww {
+     background-color:#F0FFFF !important;
+     line-height: 32px;
+    margin-top: 10px;
+    width: 100%;
+}
+.spans{
+  height: 20px;
+  width: 200px;
+  color: #999999 ;
+}
+/deep/.el-table th {
+    background-color: #A7D6F8 !important;
+    color: black;
+}
+/deep/.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label {
+    line-height: 28px;
+}
+</style>