Element el-table el-table-column 表头自定义

最新推荐文章于 2024-01-30 15:42:14 发布

新老农

最新推荐文章于 2024-01-30 15:42:14 发布

阅读量1k

点赞数

分类专栏： JS VUE Element 文章标签： javascript 前端 vue.js

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/129086626

版权

JS 同时被 3 个专栏收录

63 篇文章 1 订阅

订阅专栏

VUE

18 篇文章 0 订阅

订阅专栏

Element

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

     <el-table
          :data="datas"
          stripe
          style="width: 100%;"
      >
          <el-table-column fixed type="index" label="序号" width="50" style="text-align: center"> </el-table-column>
          <el-table-column
              prop="client_name"
              label="客户"
              fixed
              width="80">
          </el-table-column>
          <el-table-column
              prop="style_no"
              label="款号-订单号-部门号"
              width="150">
          </el-table-column>
          <el-table-column label="订单性质" width="80">
              <template slot-scope="scope">
                  <el-tag v-if="scope.row.order_type == 0" type="info">${ scope.row.ordertype }</el-tag>
                  <el-tag v-else-if="scope.row.order_type == 1" type="success">${ scope.row.ordertype }</el-tag>
                  <el-tag v-else-if="scope.row.order_type == 2" type="warning">${ scope.row.ordertype }</el-tag>
                  <el-tag v-else-if="scope.row.order_type == 3" type="warning">${ scope.row.ordertype }</el-tag>
                  <el-tag v-else-if="scope.row.order_type == 4" type="danger">${ scope.row.ordertype }</el-tag>
              </template>
          </el-table-column>

          <el-table-column
              prop="tod_date"
              label="出货日期" width="100">
          </el-table-column>
          <el-table-column
              label="国别"
              width="450">
              <template slot="header" slot-scope="scope">
                  <span>国别</span>
                  <span style="color:#000000">（海运/</span>
                  <span style="color:#CC0000;">空运</span>
                  <span style="color:#000000">/</span>
                  <span style="color:#FF00FF;">铁路</span>
                  <span style="color:#000000">/</span>
                  <span style="color:#0000FF;">海空</span>
                  <span style="color:#000000">）</span>
              </template>
              <template slot-scope="scope">
                  <template v-for="tag in scope.row.nations">
                      <template v-if="tag.flag == 0">
                          <el-tag :key="tag.value" title="海运">
                              <span style="color: #000000"> ${tag.name} </span>
                          </el-tag>
                      </template>
                      <template v-else-if="tag.flag == 1" title="空运">
                          <el-tag :key="tag.value" type="success">
                              <span style="color: #CC0000"> ${tag.name} </span>
                          </el-tag>
                      </template>
                      <template v-else-if="tag.flag == 2" title="陆运铁路">
                          <el-tag :key="tag.value" type="warning">
                              <span style="color: #FF00FF"> ${tag.name} </span>
                          </el-tag>
                      </template>
                      <template v-else-if="tag.flag == 3" title="海空">
                          <el-tag :key="tag.value" type="danger">
                              <span style="color: #0000FF"> ${tag.name} </span>
                          </el-tag>
                      </template>
                  </template>
              </template>
          </el-table-column>
          </el-table>

在这里插入图片描述

<el-table-column width="180">
    <template slot="header" slot-scope="scope">
      销售提成
      <el-tooltip effect="dark" content="若销售提成按“百分比”，则根据“活动价”来计算" placement="top">
        <i class="el-icon-info"></i>
      </el-tooltip>
    </template>
    <template slot-scope="scope">
      ...
    </template>
</el-table-column>

在这里插入图片描述

<el-table-column
  prop="address"
  :render-header="renderTableHeader">
</el-table-column>

 methods:{
	renderTableHeader (h, { column, $index }) {
		 return h('div', {}, [
		   h('el-popover', {
		     ref: 'popover1',
		     props: {
		       placement: 'top-start',
		       title: '标题',
		       width: '200',
		       trigger: 'hover',
		       content: '这是一段内容,这是一段内容,这是一段内容,这是一段内容。'
		     }
		   }),
		   h('span', {}, [
		     '地址',
		     h('i', {
		       'class': 'el-icon-question',
		       // 自定义指令
		       directives: [
		         {
		           name: 'popover',
		           arg: 'popover1'
		         }
		       ]
		     })
		   ])
		 ])
	}
}