vue項目中使用iview組件中的table插件實現表頭文字居中,內容文字居左


分享一下我在做項目中遇到的項目需求(vue項目中使用iview組件中的table插件實現表頭文字居中,內容文字居左)的解決方法

要實現的效果圖:

        

 

目標:實現“副本名稱”居中,它下面的內容居左

代碼實現:(1)html布局代碼

              

         <Table
                           width="100%"
                           :columns="表頭信息"
                           :data="對應的接口數據"
                         ></Table>
     (2)js部分的代碼
        1.表頭信息部分代碼:
                  
                  
                  {
                            title: "副本名稱",
                            key: "name",
                            align: "center",
                            render: (h, params) => {
                               return h('div', {
                                    style: {
                                        textAlign: 'left'
                                    }
                                }, [
                                    h('span', {
                                          style: {
                                          }
                                    }, params.row.copyName)
                                ]);
                             }
                        },
         2.對應接口數據(調取接口,直接將接口里面的data數據賦值給table里面的data參數)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM