el-table-column中数据与按钮在一个单元格中

在反馈信息中，包括反馈信息和详情按钮，点击详情按钮会弹出一个表格的对话框，表格中会显示反馈信息的详细信息，但是注意：将反馈信息和详情按钮放在同一行中，需要对样式进行设置，将一个设置为左浮动，另外一个设置为右浮动,这一个单元格的宽度是固定的，将反馈信息的数据宽度的显示设置小一点，在设置相应的浮动就可以将数据与按钮放在一行中

<el-table-column label="反馈信息" header-align="left" align="left" prop="info" width="200" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div style="float: left;width: 50px">
              {
   
   { scope.row.info }}
            </div>
            <div style="float: right">
              <el-button class="buttonClass" type="primary" size="mini" @click="dialogTableCilck(scope.row)">详情</el-button>
            </div>
          </template>
        </el-table-column>

ElementUI按钮的大小的样式只有三种，要想设置成上面的样式大小，就需要自定义按钮大小样式

上面的class的样式就是自定义按钮的样式

.buttonClass {
  width: 30px;
  height: 20px;
  padding: 0;
  font-size: 10px;
}

点击详情按钮按弹出表格的对话框，对话框要想是表格，就需要设置成表格的对话框

<el-dialog title="反馈信息详情" :visible.sync="dialogTableVisible">
      <el-table
        ref="dataTable"
        class="tableClass"
        :data="dialogData"
        height="400"
        width="550"
        size="small"
        border
      >
        <el-table-column label="序号" align="center" type="index" width="50" height="60"></el-table-column>
        <el-table-column property="" label="" width="120"></el-table-column>
        <el-table-column property="" label="" width="120"></el-table-column>
        <el-table-column property="" label="" width="336"></el-table-column>
        <el-table-column property="" label="" width="100"></el-table-column>
      </el-table>

      <el-button type="primary" size="medium" @click="dialogTableVisible = false">关闭</el-button>
    </el-dialog>