Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how js obtains the relevant knowledge points of the vue ElementUI table, the content is detailed, the logic is clear, I believe most people still know too much about this knowledge, so share this article for your reference, I hope you can get something after reading this article, let's take a look at it.

ElementUI form

Front work: install vue and elemetUI. If it is introduced on demand, make sure that the Table and TableColumn modules have been introduced

Example: a basic table export default {name: "home", data () {return {tableData: [{name: 'oppo', todayBuy: 500, monthBuy: 3500, totalBuy: 22000} {name: 'vivo', todayBuy: 300, monthBuy: 2200, totalBuy: 24000} / /...]}

The property value of el-table indicates whether stripebool uses zebra stripes and whether borderbool uses a border height value to fix the header. As long as the property is set, the header max-height numeric bit table sets the property value of the maximum height el-table-column description fixedtrue (default; left) | left | right fixed bar, which floats when scrolling, and you can choose which side to float on.

If we want to display the row differently through some attributes in the line, we can add the row-class-name attribute to the el-table.

The row-class-name property value is a callback function

/ /... export default {methods: {/ / handler tableRowClassName ({row, rowIndex}) {if (rowIndex = 1) {return 'warning-row';} else if (rowIndex = 3) {return' success-row';} return';}}. El-table. Warning-row {background: oldlace;}. El-table. Success-row {background: # f0f9eb } multistage header

Multi-level headers are implemented through nesting, and the data is more traversed by prop. See the following example

The effect is as follows

Get the form and focus on it!

How to get a table in js? To uniquely identify the table by adding a ref attribute to it

/ /... / /... Methods: {setCurrent (row) {/ / through this.$refs. / / set the two behaviors of the table and select this.$refs.singleTable}, / /. Radio

You only need to configure the highlight-current-row property to achieve radio selection. The event triggered when selected is then managed by the current-change event, which is passed into currentRow,oldCurrentRow. If you need to display the index, you can add a column of el-table-column, and set the type property to index to display the index number starting from 1.

/ /... Methods: {setCurrent (row) {/ / set the two behaviors of the table to select this.$refs.singleTable.setCurrentRow (1);}, / /. Multiple selection

Manually add an attribute, add type= "selection", the price will be adjusted one line multiple selection button

{{scope.row.date}} / / Select a line and clear the option

Use js to select

/ / this.$refs..toggleRowSelection (row), row is an entire row of tableData data this.$refs.multipleTable.toggleRowSelection (row); / / this.$refs..clearSelection (); unselect this.$refs.multipleTable.clearSelection (); sort

Define the default-sort in the table to define the default collation and collation

Give column sorting by adding a srtotable attribute to the column

Screening

The filters attribute is defined in the column, and the value is an array of options [{text:', value:'}], which is provided to the user for filtering. At the same time, specify the callback function to be processed: filter-method, and the value is the function name. There are three parameters, the selected value, the row at traversal time, and the column at traversal time

HandleFilter (val,row) {return row.todayBuy = = val}

Custom column

We usually add an action column, such as delete and edit. Then we can not specify the prop attribute, and then add something else to the column as follows. At the same time, we can get columns and rows through scope by defining slot-scope= "scope" on the column. A case study of using the official website directly

{{scope.row.date}}

Name: {{scope.row.name}}

Address: {{scope.row.address}}

{{scope.row.name}} Edit and delete export default {data () {return {tableData: [{date: '2016-05-02, name:' Wang Xiaohu' Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-04 lane, name:' Wang Xiaohu', address: 'Lane 1517 Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-01 lane, name:' Wang Xiaohu' Address: '1519 Lane, Jinshajiang Road, Putuo District, Shanghai'}, {date: '2016-05-03 lane, name:' Wang Xiaohu', address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai]}}, methods: {/ / the click function of the button handleEdit (index) Row) {console.log (index, row) }, handleDelete (index, row) {console.log (index, row);}} expand the line

Knowledge is numerous and miscellaneous, accumulating little by little, because the needs are also varied and can be used.

Adding the attribute type= "expand" to the column (el-column) can be set to expand the row, and the expanded content is defined in the column tag. The attribute is also obtained through slot-scope= "scope" details as follows:

Name: {{scope.row.name}}

Address: {{scope.row.address}}

Export default {data () {return {tableData: [{id: '12987125 eggs, name:' delicious and delicious eggs', category: 'Jiangsu and Zhejiang snacks', desc: 'Dutch quality light milk' Milk is strong but not greasy', address: 'Zhenbei Road, Putuo District, Shanghai', shop: 'Wang Xiaohu parents', shopId: '10333'}, {id:' 12987126 eggs, name: 'delicious eggs', category: 'Jiangsu and Zhejiang snacks', desc: 'Dutch quality light milk' Milk is strong but not greasy', address: 'Zhenbei Road, Putuo District, Shanghai', shop: 'Wang Xiaohu parents' Shop, shopId: '10333'} these are all the contents of the article "how does js get the vue ElementUI form". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.