Vue 学习随笔系列十二 -- 表格内容渲染方法

表格内容渲染方法

文章目录

• 表格内容渲染方法

---

1、使用 formatter 函数

示例代码1

<el-table-column prop="status" label="状态" align="center" :formatter="scopeIdFormat" width="auto" />

methods:{
   //大类显示对应状态
    scopeIdFormat(row, column, cellValue){
        return row.status == '0' ? "开启" : "关闭"
    }
}

示例代码2

	<el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
      @selection-change="select"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>

      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
        align="center"
      >
      <el-table-column>
   </el-table>

columns: [
	{
		type:"index",
		label: "序号“,
		width: "55",
		align: "center"
	},
	{
	  label: "状态",
	  prop: "status",
	  formatter: (value, column) => {     //写上formatter函数
	    return value == '0' ? "开启" : "关闭"
	},
]

2、 使用 render 函数

	<el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
      @selection-change="select"
    >
      <el-table-column
        type="selection"
        width="55"
      >
      </el-table-column>

      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
        align="center"
      >
      <el-table-column>
   </el-table>


columns: [
	{
		type:"index",
		label: "序号“,
		width: "55",
		align: "center"
	},
	{
        key: "name",
        title: "名称",
        minWidth: 250,
        align: "center",
        render: (h, params) => {
          return h("div", [
            h( "a",
              {
                props: {
                  type: "primary",
                  size: "small",
                },
                on: {
                  click: () => {
                    this.clickRow(params.row); //添加点击事件
                  },
                },
              },
              params.row.name // 展示内容
            ),
          ]);
        },
      },
       {
         key: "itemNum",
         title: "总数",
         minWidth: 150,
         align: "center",
         render: (h, params) => {
           return h(
             "div",
             this.formaterNum(params.row.itemNum) // 调用数据处理的方法
           );
         }
       },
]，


methods: {
	// 点击事件
	clickRow(row) {
		console.log(111, row)
	},
	// 自定义数据处理方法
    formaterAmount(data) {
      if (!data) return '0.00'
      // 将数据分割，保留两位小数
      data= data.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(data)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数据分割为小数部分和整数部分
      const newArr = data.toString().split('.')
      if (newArr.length === 2) { // 有小数部分
        floatPart = newArr[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    }
}

3、使用 template 自定义

<el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="item.prop==='status'">
            <el-image
              class="icon-img"
              :src="'../../start.img"
            ></el-image>
            <span>{{ scope.row[item.prop] }}</span>
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>

      </el-table-column>
    </el-table>

4、使用 slot 插槽

<el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
        align="center"
      >
        <template slot-scope="scope" slot="status">
          <span>{{ scope.row.status == '0' ? "开启" : "关闭"}}</span>
        </template>
      </el-table-column>
 </el-table>
 
columns: [
	{
		type:"index",
		label: "序号“,
		width: "55",
		align: "center"
	},
	{
		 label: "状态",
		 prop: "status",
		 slot: "status",
  	}
]

5、注意

使用template 自定义时，columns中的序号列显示不出来，需要在代码中重新编写，
例：

<el-table
      size="small"
      border
      v-loading="loading"
      :data="tableData"
    >
   	  <el-table-column
   	  label="序号"
   	  type="index"
   	  >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        v-bind="item"
        align="center"
      >
        <template slot-scope="scope" slot="status">
          <span>{{ scope.row.status == '0' ? "开启" : "关闭"}}</span>
        </template>
      </el-table-column>
 </el-table>
 
columns: [
	// {
	// 	type:"index",
	// 	label: "序号“,
	// 	width: "55",
	// 	align: "center"
	// },
	{
	  label: "状态",
	  prop: "status",
	  slot: "status",
    }
]