如何在Vuetify v-data-table上对齐标题

时间:2020-01-08 11:52:09

标签: javascript css vue.js html-table vuetify.js

我的桌子上的标题出现了一个奇怪的问题,有些标题与顶部对齐,但有些标题没有对齐,我什至尝试了所有对齐方式:“ left”,但没有解决,这是一张图片我的问题

enter image description here

我的代码是这样:

*表格:

zip.c:238

标题的数据:

<v-data-table :headers="header_data" :items="finalData" :search="search" u/click:row="showAlert">
                <template v-slot:item.aum="{ item }">
                    {{formatNumber(item.aum)}}
                </template>
            </v-data-table>

谢谢!

2 个答案:

答案 0 :(得分:4)

这通常是由于包含jobs图标(默认情况下为 public MainWindow() { InitializeComponent(); } public void readstuff (){ } public static string getBetween(string strSource, string strStart, string strEnd) { int Start, End; if (strSource.Contains(strStart) && strSource.Contains(strEnd)) { Start = strSource.IndexOf(strStart, 0) + strStart.Length; End = strSource.IndexOf(strEnd, Start); return strSource.Substring(Start, End - Start); } else { return ""; } } private void BrowseButton2(object sender, RoutedEventArgs e) { OpenFileDialog fd = new OpenFileDialog(); fd.InitialDirectory = "\\\\folder1\\savelocation"; fd.Filter = "Binary Files | *.bin"; fd.ShowDialog(); filePath2.Text = fd.FileName; } private void SavingPathButton2(object sender, RoutedEventArgs e) { FolderSelectDialog fs = new FolderSelectDialog(); fs.InitialDirectory = "\\\\Nx3200\\supplier\\FONEX\\LambdaGain"; fs.ShowDialog(); savingPath2.Text = fs.FileName; } private void StartConversion2(object sender, RoutedEventArgs e) { try { Byte [] a1 = File.ReadAllBytes(filePath2.Text); Byte[] a2 = new Byte[2 * (a1.Length)]; int i = 0; while(i < a1.Length) { a2[2*i] = a1[i]; a2[(2 * i) + 1] = 0; i++; } try { string fullPath = Path.Combine(savingPath2.Text, "new"); File.WriteAllBytes(savingPath2.Text, a2); MessageBox.Show("Conversion Complete"); } catch (UnauthorizedAccessException ex) { Form3 frm3 = new Form3(); frm3.Text = "X-Formatter"; frm3.ShowDialog(); } } catch (FileNotFoundException ex) { string stackTrace = ex.ToString(); Form1 frm1 = new Form1(stackTrace); frm1.Text = "X-Formatter"; frm1.ShowDialog(); } } private void BrowseButton1(object sender, RoutedEventArgs e) { OpenFileDialog fd = new OpenFileDialog(); fd.InitialDirectory = "\\\\folder1\\savelocation"; fd.Filter = "Binary Files | *.bin"; fd.ShowDialog(); filePath1.Text = fd.FileName; } private void SavingPathButton1(object sender, RoutedEventArgs e) { FolderSelectDialog fs = new FolderSelectDialog(); fs.InitialDirectory = "\\\\folder1\\savelocation"; fs.ShowDialog(); savingPath1.Text = fs.FileName; } private void StartConversion1(object sender, RoutedEventArgs e) { try { Byte[] a1 = File.ReadAllBytes(filePath1.Text); Byte[] a2 = new Byte[(a1.Length) / 2]; a2[0] = a1[0]; int i = 2; int j = 1; while (i < a1.Length) { a2[j] = a1[i]; i = i + 2; j += 1; } try { File.WriteAllBytes(savingPath1.Text, a2); MessageBox.Show("Conversion Complete"); } catch (UnauthorizedAccessException ex) { Form3 frm3 = new Form3(); frm3.Text = "XGIGA formatter"; frm3.ShowDialog(); } } catch(FileNotFoundException ex) { string stackTrace = ex.ToString(); Form1 frm1 = new Form1(stackTrace); frm1.Text = "XGIGA Formatter"; frm1.ShowDialog(); } } private void FilePath1_TextChanged(object sender, System.Windows.Controls.TextChangedEventArgs e) { } private void Button_Click(object sender, RoutedEventArgs e) { AboutBox1 ab = new AboutBox1(); ab.Text = "XGIGA Formatter"; ab.ShowDialog(); } } )引起的,可能与未设置sortable一起导致。每个都是可以在您的案例sortable中设置的属性。

您可以:

  • 使用width中的header_data删除不需要的地方
  • sortable: false中酌情添加固定的header_data
  • 使用widthheader_data插槽(例如,将文本和图标包装在div中,并使用一些内置的CSS flexbox相关类)
  • 创建一些自定义CSS

前两个选项最简单,只要您对它们提供的约束感到满意。自定义插槽选项,即header(请参阅API的插槽部分的docs),即使在逐个单元的基础上,也非常易于实现。

答案 1 :(得分:1)

我不想设置固定的宽度,因此举一个如何使用CSS修复此问题的示例:

.v-data-table-header th {
  white-space: nowrap;
}

信用this comment