Element-ui的表格

链接地址：http://element-cn.eleme.io/#/zh-CN/component/table

操作一： 删除

在这里插入图片描述

在 组件中添加 @selection-change=“handleSelectionChange” 事件，并在el-table-column组件中添加类型为selection

<div>
    <el-button
       size="mini"
       type="danger"
       @click="handleBtnDelete"
     >删除
    </el-button>
</div>
<el-table
   :data="tableData"
   border
   ref="multipleTable"
   style="width: 100%"
   @cell-dblclick="changeInput"
   @selection-change="handleSelectionChange"
 >
    <el-table-column
        type="selection"
        align="center"
        width="55">
    </el-table-column>
    
    <!--  .......   -->
    
    
</el-table>

具体方法：

export default {
  name: 'StandardLevel',
  data () {
    return {
      // 用来存放需要删除的数据ID  
      multipleSelection: [],
	  // ....	
    }
  },
  methods: {
    // 删除数据
    handleBtnDelete () {
      console.log(this.multipleSelection.length)
      let tempSelection = this.multipleSelection
      let tempTableData = this.tableData
      for (let i of tempSelection) {
        tempTableData.splice(tempTableData.findIndex(item => item.id === i), 1)
      }
      this.tableData = tempTableData
    },
    // 复选框选中
    handleSelectionChange (val) {
      console.log('插入数据 => ' + val)
      this.multipleSelection = []
      for (let item of val) {
        this.multipleSelection.push(item.id)
      }
    }
  }
}
</script>
操作二： 单元格编辑

在这里插入图片描述

这个可以使用template中添加其他的组件，利用element-ui的slot-scope属型

在页面加载的时候生成一个和表格数据相对应的表格编辑框是否显示的数据，并初始化为false。

<el-table-column
  prop="date"
  label="代码"
  sortable
  width="180"
  align="center"
 >
   <template slot-scope="{row,$index}">
      <el-input
          v-if="showEdit[$index]['date']"
          v-model="row.date"
          @change="handleEdit(row, $index)"
          @blur="inputBlur"
          v-focus
      />
      <span v-if="!showEdit[$index]['date']">{{row.date}}</span>
    </template>
</el-table-column>

具体方法：

export default {
  name: 'StandardLevel',
  components: {
    CommonContext
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.getElementsByTagName('input')[0].focus()
        // el.focus()
      }
    }
  },
  data () {
    return {
      // 显示编辑框
      showEdit: [],
      // 表格数据
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '上海市普陀区金沙江路 1518 弄',
          color: '#ff4500',
          priority: 1
        }, {
          id: 2,
          date: '2016-05-04',
          name: '上海市普陀区金沙江路 1518 弄',
          color: '#ff8c00',
          priority: 4
        }
      ]
    }
  },
  mounted () {
    this.setShowEdit()
  },
  watch: {
    // 监控tableData数据，发生改变的时候跟新单元格显示状态
    tableData: function () {
      console.log('数据更新')
      this.setShowEdit()
    }
  },
  methods: {
    // 初始化单元格显示状态
    setShowEditInit () {
      for (let item of this.showEdit) {
        for (let innerItem in item) {
          item[innerItem] = false
        }
      }
    },
    // 设置单元显示转态数据
    setShowEdit () {
      let tempShowEdit = []
      for (let item of this.tableData) {
        let tempShow = {}
        for (let innerItem in item) {
          tempShow[innerItem] = false
        }
        tempShowEdit.push(tempShow)
      }
      this.showEdit = tempShowEdit
    },
    // 切换单元格为编辑
    changeInput (row, column, cell, event) {
      this.setShowEditInit()
      let nowObj = column.property
      let index = this.tableData.findIndex((item) => {
        return item.id === row.id
      })
      this.showEdit[index][nowObj] = !this.showEdit[index][nowObj]
    },
    handleEdit (row, index) {
      console.log(row)
      console.log(index)
      this.tableData[index] = row
    },
    // 失焦
    inputBlur () {
      this.setShowEditInit()
    }
  }
}
</script>
操作三： 结合其他的组件

在这里插入图片描述
element-ui在el-table-colum组件中使用template可以很方便的添加各种组件

<!-- 拾色器 -->
<el-table-column
    prop="color"
    sortable
    label="颜色"
    width="180"
    align="center"
 >
    <template slot-scope="scope">
        <el-color-picker
            v-model="scope.row.color"
            show-alpha
            @change="colorChange(scope.row, scope.$index)"
            :predefine="predefineColors">
        </el-color-picker>
    </template>
</el-table-column>
<!-- 下拉框 -->
<el-table-column
    prop="priority"
    sortable
    label="优先级"
    width="90"
    align="center"
>
	<template slot-scope="{row,$index}">
		<el-select v-model="row.priority" placeholder="请选择" @change="selectChange(row, $index)">
			<el-option
                v-for="item in priorityList"
                :key="item.id"
                :label="item.priority"
                :value="item.priority">
			</el-option>
		</el-select>
	</template>
</el-table-column>
操作四： 增加

对于增加来说，很简单，就是在表格数据中添加一条数据，不做过多赘述。

操作五： 排序

sortable 可以达到排序的目的，如果你自己写也可以，反正对于 mvvm框架来说，操作数据就是最关键的。

<el-table-column
    prop="priority"
    sortable
    label="优先级"
    width="90"
    align="center"
>

完整代码

<template>
  <common-context>
    <div class="block-context">
      <div>
        <el-button
          style="margin-left: 2px;"
          size="mini"  icon="el-icon-edit"
          type="primary">
        </el-button>

        <el-button
          size="mini"
          type="danger"
          @click="handleBtnDelete"
        >
          删除
        </el-button>
      </div>
      <el-table
        :data="tableData"
        border
        ref="multipleTable"
        style="width: 100%"
        @cell-dblclick="changeInput"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55">
        </el-table-column>
        <el-table-column
          prop="date"
          label="代码"
          sortable
          width="180"
          align="center"
        >
          <template slot-scope="{row,$index}">
            <el-input
              v-if="showEdit[$index]['date']"
              v-model="row.date"
              @change="handleEdit(row, $index)"
              @blur="inputBlur"
              v-focus
            />
            <span v-if="!showEdit[$index]['date']">{{row.date}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="描述"
        >
          <template slot-scope="{row,$index}">
            <el-input
              v-if="showEdit[$index]['name']"
              v-model="row.name"
              @change="handleEdit(row, $index)"
              @blur="inputBlur"
              v-focus
            />
            <span v-if="!showEdit[$index]['name']">{{row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="color"
          sortable
          label="颜色"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <el-color-picker
              v-model="scope.row.color"
              show-alpha
              @change="colorChange(scope.row, scope.$index)"
              :predefine="predefineColors">
            </el-color-picker>
          </template>
        </el-table-column>
        <el-table-column
          prop="priority"
          sortable
          label="优先级"
          width="90"
          align="center"
        >
          <template slot-scope="{row,$index}">
            <el-select v-model="row.priority" placeholder="请选择" @change="selectChange(row, $index)">
              <el-option
                v-for="item in priorityList"
                :key="item.id"
                :label="item.priority"
                :value="item.priority">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </common-context>
</template>

<script>
import { colorToHex } from '@/utils/colorToHex'
import CommonContext from '@/pages/common/CommonContext'

export default {
  name: 'StandardLevel',
  components: {
    CommonContext
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.getElementsByTagName('input')[0].focus()
        // el.focus()
      }
    }
  },
  data () {
    return {
      multipleSelection: [],
      // 显示编辑框
      showEdit: [],
      // 优先级数据
      priorityList: [
        {
          id: 1,
          priority: 1
        },
        {
          id: 2,
          priority: 2
        },
        {
          id: 3,
          priority: 3
        },
        {
          id: 4,
          priority: 4
        }
      ],
      // 表格数据
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '上海市普陀区金沙江路 1518 弄',
          color: '#ff4500',
          priority: 1
        }, {
          id: 2,
          date: '2016-05-04',
          name: '上海市普陀区金沙江路 1518 弄',
          color: '#ff8c00',
          priority: 4
        }, {
          id: 3,
          date: '2016-05-01',
          name: '上海市普陀区金沙江路 1518 弄',
          color: '#00ced1',
          priority: 3
        }, {
          id: 4,
          date: '2016-05-03',
          name: '上海市普陀区金沙江路 1518 弄',
          color: '#c71585',
          priority: 6
        }
      ],
      // 颜色数据
      color5: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585'
      ]
    }
  },
  mounted () {
    this.setShowEdit()
  },
  watch: {
    // 监控tableData数据，发生改变的时候跟新单元格显示状态
    tableData: function () {
      console.log('数据更新')
      this.setShowEdit()
    }
  },
  methods: {
    // 初始化单元格显示状态
    setShowEditInit () {
      for (let item of this.showEdit) {
        for (let innerItem in item) {
          item[innerItem] = false
        }
      }
    },
    // 设置单元显示转态数据
    setShowEdit () {
      let tempShowEdit = []
      for (let item of this.tableData) {
        let tempShow = {}
        for (let innerItem in item) {
          tempShow[innerItem] = false
        }
        tempShowEdit.push(tempShow)
      }
      this.showEdit = tempShowEdit
    },
    // 下拉框修改
    selectChange (row, index) {
      let tempTableData = this.tableData
      tempTableData[index] = row
      this.tableData = tempTableData
    },
    // 拾色器修改
    colorChange (row, index) {
      let tempRow = row
      let tempTableData = this.tableData
      let hexColor = colorToHex(tempRow.color)
      tempTableData[index].color = hexColor
      this.tableData = tempTableData
    },
    // 切换单元格为编辑
    changeInput (row, column, cell, event) {
      this.setShowEditInit()
      let nowObj = column.property
      let index = this.tableData.findIndex((item) => {
        return item.id === row.id
      })
      this.showEdit[index][nowObj] = !this.showEdit[index][nowObj]
    },
    handleEdit (row, index) {
      console.log(row)
      console.log(index)
      this.tableData[index] = row
    },
    // 失焦
    inputBlur () {
      this.setShowEditInit()
    },
    // 增加数据
    handleBtnAdd (index, row) {
      // console.log(index, row)
      // this.tableData.splice(index, 0, {})
    },
    // 删除数据
    handleBtnDelete () {
      console.log(this.multipleSelection.length)
      let tempSelection = this.multipleSelection
      let tempTableData = this.tableData
      for (let i of tempSelection) {
        tempTableData.splice(tempTableData.findIndex(item => item.id === i), 1)
      }
      this.tableData = tempTableData
    },
    // 复选框选中
    handleSelectionChange (val) {
      console.log('插入数据 => ' + val)
      this.multipleSelection = []
      for (let item of val) {
        this.multipleSelection.push(item.id)
      }
    }
  }
}
</script>

有错误留言给我，相互学习，嘻嘻！

Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue