VUE element-ui 之table表格双表头、表头内插入输入框

步骤：模板部分：就是在表头中嵌套表头，slot="header"是重点，两个表头内label、prop需一致，否则表格内容不显示<el-table-columntype="selection"width="55"align="center":selectable="checkboxT"><el-table-column

赫兹/Herzz

4105人浏览 · 2022-01-12 19:45:44

赫兹/Herzz · 2022-01-12 19:45:44 发布

步骤：
模板部分：
就是在表头中嵌套表头，slot="header"是重点，两个表头内label、prop需一致，否则表格内容不显示

		<el-table-column
            type="selection"
            width="55"
            align="center"
            :selectable="checkboxT"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
            />
          </el-table-column>
          <!-- slot="header" -->
          <el-table-column label="序号" width="70" align="center">
            <el-table-column label="" width="70" align="center">
              <template slot-scope="scope">
                {{ (scope.$index + 1) }}
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="订单编号" width="130" prop="sale_order_num" :show-overflow-tooltip="true">
            <el-table-column label="订单编号" width="130" prop="sale_order_num" :show-overflow-tooltip="true">
              <template slot="header">
                <el-input v-model="query.saleOrderNum" size="mini" placeholder="请输入" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="自编号" width="130" prop="personal_num" :show-overflow-tooltip="true">
            <el-table-column label="自编号" width="130" prop="personal_num" :show-overflow-tooltip="true">
              <template slot="header">
                <el-input v-model="query.personalNum" size="mini" placeholder="请输入" />
              </template>
            </el-table-column>
          </el-table-column>

不需要配置输入框的列：

		  <el-table-column label="单价(元/㎡)" width="130" prop="price" sortable :show-overflow-tooltip="true">
            <el-table-column label="" width="130" prop="price" :show-overflow-tooltip="true">
              <template slot="header" />
            </el-table-column>
          </el-table-column>

来看效果：
在这里插入图片描述
表格自带排序不受影响，且表头固定。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^